英文:
How to apply striped style to a table, two rows at a time
问题
奇数和偶数行在这里不起作用。
是否有一种技巧，可以对彼此连接的两行应用样式？
英文:
Consider this table:
<table>
<tbody>
<tr><td>First data row</td></tr>
<tr><td>Actions of the first row</td></tr>
<tr><td>Second data row</td></tr>
<tr><td>Actions of the second data row</td></tr>
<tr><td>Third data row</td></tr>
<tr><td>Actions of the third data row</td></tr>
<tr><td>Fourth data row</td></tr>
<tr><td>Actions of the fourth data row</td></tr>
</tbody>
</table>
Odd and even rows here does not work.
Is there a technique that I can apply style on the two rows that are connected to each other?
答案1
得分: 1
你可以使用 nth-child 公式来实现你想要的效果
tbody > tr:nth-child(4n-3) {
background-color: red;
}
tbody > tr:nth-child(4n-2) {
background-color: red;
}
<table>
<tbody>
<tr><td>第一行数据</td></tr>
<tr><td>第一行的操作</td></tr>
<tr><td>第二行数据</td></tr>
<tr><td>第二行数据的操作</td></tr>
<tr><td>第三行数据</td></tr>
<tr><td>第三行数据的操作</td></tr>
<tr><td>第四行数据</td></tr>
<tr><td>第四行数据的操作</td></tr>
</tbody>
</table>
英文:
You can use nth-child formulas to do what you want
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-css -->
tbody > tr:nth-child(4n-3) {
background-color: red;
}
tbody > tr:nth-child(4n-2) {
background-color: red;
}
<!-- language: lang-html -->
<table>
<tbody>
<tr><td>First data row</td></tr>
<tr><td>Actions of the first row</td></tr>
<tr><td>Second data row</td></tr>
<tr><td>Actions of the second data row</td></tr>
<tr><td>Third data row</td></tr>
<tr><td>Actions of the third data row</td></tr>
<tr><td>Fourth data row</td></tr>
<tr><td>Actions of the fourth data row</td></tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论