Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap table-striped in multiple tbody with doubled tr

I was simple table and I used bootstrap and classes table and table-striped. It works well.

<h3>Old table</h3>
<table class="table table-striped">
    <thead>
        <tr><th>Brand</th><th>Model</th></tr>
    </thead>
    <tbody>
        <tr><td>Audi</td><td>A1</td></tr>
        <tr><td>Audi</td><td>A2</td></tr>
        <tr><td>Audi</td><td>A3</td></tr>
        <tr><td>Audi</td><td>A4</td></tr>
    </tbody>    
</table>

But now I have to complicate my table and use multiple tbody in tabled element (each tbody has two tr element). So bootstrap class table-striped does not work. There is any way to do it in bootstrap? The rows with cars should be table-striped but comment rows not.

<h3>Current table</h3>
<table class="table table-striped">
    <thead>
        <tr><th>Brand</th><th>Model</th></tr>
    </thead>
    <tbody>
        <tr><td>Audi</td><td>A1</td></tr>
        <tr class="comment"><td colspan="2">Comment...</td></tr>
    </tbody>
    <tbody>
        <tr><td>Audi</td><td>A2</td></tr>
        <tr class="comment hide"><td colspan="2">Comment...</td></tr>
    </tbody>
    <tbody>
        <tr><td>Audi</td><td>A3</td></tr>
        <tr class="comment"><td colspan="2">Comment...</td></tr>
    </tbody>
    <tbody>
        <tr><td>Audi</td><td>A4</td></tr>
        <tr class="comment hide"><td colspan="2">Comment...</td></tr>
    </tbody>    
</table>

Plunker example

like image 279
lukpaw Avatar asked Jan 26 '26 02:01

lukpaw


1 Answers

The work around for bootstrap would be much more complicated than just putting in your own custom classes. The bootstrap source for table-striped simply makes all odd rows the different color. That means that you're likely going to getting way further in depth and causing yourself way more trouble if you try to have bootstrap do it for you versus just putting in the classes yourself.

like image 174
JcKelley Avatar answered Jan 27 '26 16:01

JcKelley



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!