HTML Question

Twitter Bootstrap : collapsible table line width with colspan

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.