CODEWITHSUNDEEP
htmltwitter-bootstrap
lukpaw
lukpaw

Reputation: 1613

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

Upvotes: 3

Views: 5537

Answers (2)

F&#225;bio Zangirolami
F&#225;bio Zangirolami

Reputation: 1956

$('tbody').parents('.fixed-table-container').find('tr:even').addClass( 'even' );

.even { background: #f9f9f9; }

And in bootstrap.min.css find --> .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9} replace --> .table-striped>tbody>tr:nth-of-type(odd){background-color:none}

Upvotes: 0

JcKelley
JcKelley

Reputation: 1984

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.

Upvotes: 2

Related Questions