Nathan R Nathan R - 1 month ago 16
HTML Question

Trying to create an accordion table with Bootstrap, but cells get corrupted on click

I'm trying to create a table that reveals and hides additional rows of information, accordion-style. It's working for the most part, but unfortunately the cell layout gets all screwed up whenever you reveal a row.

jsfiddle

As you can see, when you click a row, all the new cells become compressed to the left instead of stretching out across the row like normal. I've been trying to debug in Chrome but I can't figure out why it's doing this.

<fieldset>
<div class="table-scrollable">
<table id="tbl-sample-values" class="table table-condensed table-bordered table-hover" style="font-size:85%;">
<thead>
<tr style="color: red;">
<th>Step #</th>
<th>Processing Step</th>
<th>Barcode</th>
</tr>
</thead>

<tbody>

<tr data-toggle="collapse" data-target="#accordion" class="clickable">
<td>9</td>
<td colspan="2">Parts Inspection</td>
</tr>

<tr id="accordion" class="collapse">
<td>9.1</td>
<td>Handle silicon electrodes...</td>
<td>[Barcode here]</td>
</tr>

<tr data-toggle="collapse" data-target="#accordion2" class="clickable">
<td>10</td>
<td colspan="2">IPA Clean</td>
</tr>

<tr id="accordion2" class="collapse">
<td>10.1</td>
<td>Place part with frontside facing up...</td>
<td>[Barcode here]</td>
</tr>

</tbody>
</table>
</div>
</fieldset>

Answer

Its because of bootstrap CSS. When you expand a row its get .in class and this style:

.collapse.in {
    display: block;
}

You have to add custom CSS:

tr.collapse.in {
    display: table-row;
}

or update your bootstrap version - later versions already include this.

jsfiddle

Comments