我使用了简单的表格,采用了Bootstrap和table以及table-striped类。这样做效果很好。
<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>
但是现在我需要复杂化我的表格,并在table元素中使用多个tbody(每个tbody有两个tr元素)。因此,Bootstrap类table-striped无法使用。 有没有办法在Bootstrap中实现这一点? 车辆行应该是table-striped,但注释行不是。
<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>