bootstrap table-striped in multiple tbody with doubled tr

Question

我是简单的表，我使用了bootstrap，类表和表条带。效果很好。

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

但是现在我必须使我的表复杂化并在tabled元素中使用多个tbody（每个tbody都有两个tr元素）。所以bootstrap类table-striped不起作用。 有没有办法在bootstrap中执行此操作？带有汽车的行应该是表条带，但不是注释行。

<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

Answer 1

使用bootstrap的工作要比放入自己的自定义类要复杂得多。 table-striped的{​​{3}}只会使所有奇数行的颜色不同。这意味着如果您尝试为自己做引导程序而不是仅仅自己上课，那么您可能会进一步深入并让自己更麻烦。

Answer 2

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

.even { background: #f9f9f9; }

在bootstrap.min.css中找到 - ＆gt; .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9}替换 - ＆gt; .table-striped>tbody>tr:nth-of-type(odd){background-color:none}