我有一个简单的表结构
- <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>
