Having trouble with an accordion table using Bootstrap…

[sweetdiss]

Long time reader, first time poster!

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.

http://jsfiddle.net/3y7118ek/

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.

“`
<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>

`

Thanks!

[Beverleyh]

when you click a row, all the new cells become compressed to the left instead of stretching out across the row like normal

The demo isn’t exhibiting this behaviour so it’s difficult to comment. Looks like you forgot the JavaScript that reveals the cells.

[Shikkediel]

It’s relying on a Bootstrap script, Beverley. I think sweetdiss is referring to the inline behaviour of the submenu td text. So rather than being “compressed”, it’s not taking up the full width. Not a clue myself how to fix that by the way.

[Beverleyh]

OK – I didn’t see the script inclusion from my iPhone when I checked this morning. The click-to-reveal doesn’t work there or in IE11 (and I’m having trouble booting up my Edge machine at the mo to can’t check there either).

Tip: Add an empty onclick attribute to .clickable tr element to make it work in iOS

From what I can see in Chrome, display:block; is applied to the row to make it visible, but that isn’t playing nicely with the table cells (making them collapse). For those it should be display:table-row;

tr.collapse.in { display:table-row; } in your stylesheet should hopefully fix it.

[sweetdiss]

Thanks! That worked great.

[Author]

Posts