我有一个简单的表结构
<table class="striped">
<tr class="parent"><td></td></tr>
<tr class="parent"><td></td></tr>
<tr class="parent"><td></td></tr>
<tr class="parent"><td></td></tr>
</table>
我可以轻松添加CSS：
.striped tbody tr.parent:nth-of-type(odd) { background:red; }
麻烦的是当你点击其中一个父< tr>它将展开的行并添加一个额外的< tr>细节行如下：
<table class="striped">
<tr class="parent"><td></td></tr>
**<tr class="detail"><td></td></tr>**
<tr class="parent"><td></td></tr>
<tr class="parent"><td></td></tr>
<tr class="parent"><td></td></tr>
</table>
是否有纯CSS方式来保持原始条带化？ Here is a codepen显示两个表发生了什么
解决方法
如果您可以选择稍微更改HTML,则可以使用多个显式< tbody>元素并将子元素插入到同一个< tbody>内作为父母.这实际上具有语义意义,并且它将父级与其子组合在一起.
从https://developer.mozilla.org/en/docs/Web/HTML/Element/tbody起
multiple
<tbody>elements are permitted (if consecutive),allowing the data-rows in long tables to be divided into different sections,each separately formatted as needed
例如.
.striped tbody:nth-of-type(odd) .parent { background:red; }
<table class="striped">
<tbody>
<tr class="parent"><td>Stuff</td></tr>
<tr class="child"><td>child</td></tr>
</tbody>
<tbody><tr class="parent"><td>Stuff</td></tr></tbody>
<tbody><tr class="parent"><td>Stuff</td></tr></tbody>
<tbody><tr class="parent"><td>Stuff</td></tr></tbody>
</table>
