Question: I'm trying to use the collapse functionality in Twitter Bootstrap in order to display an additional line in a table with a single cell taking the whole width of the table... The line is displayed when a button in the above line is clicked.

The problem is : without the collapse functionality, with the `colspan` attribute, the "extra line" has the good width, but with the functionality in action, the `colspan` attribute doesn't seem take effect, the line stays of the width of the first cell of the line above.

```
<table>
    <thead>
        <tr>
            <th></th>
            <th>content</th>
            <th>content</th>
            <th>content</th>
            <th>content</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
            <button data-toggle="collapse" data-target="#collapsible">Develop</button>
            </td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
        </tr>
        <tr id="collapsible" class="collapse">
            <td colspan="5">
                Collapsible content
            </td>
        </tr>
    </tbody>
</table>

```

What is the problem and how to solve it ?

Answer: 
I solved this issue by putting a `div` in the cell that I want to collapse and attached the class `collapsible` to it.
None of the other solutions on this page worked for me, but
I found the answer here: <https://stackoverflow.com/a/21939080/2378910>

(I don't want to take credit so upvote that one instead!)

It says:

> 
> To collapse a table row, you should write extra css for the collapsed
>  row:
> 
> 
> 

```
table .collapse.in {
    display: table-row !important;
}

```

> 
> It will fix the display issue after the row expanded.
> 
> 
>