Nathan R Nathan R - 2 months ago 29
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.


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.

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


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

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

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

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



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

You have to add custom CSS: {
    display: table-row;

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