我的表中有节,所以有节标题行和常规行。我如何给两行中的一行着色,以便节标题后的下一行总是着色,就像下面的代码片段一样。我尝试使用+
和:nth-child
的组合,但我无法使其工作。
table {
border-collapse: collapse;
}
.want {
background-color: aquamarine;
}
<table>
<tr class="table-header"><th>Blah</th><th>Blablablah</th></tr>
<tr class="section-header"><th colspan="2">Section A</th></tr>
<tr class="regular-row want"><td>A1</td><td>Blah</td></tr>
<tr class="regular-row"><td>A2</td><td>Blah</td></tr>
<tr class="regular-row want"><td>A3</td><td>Blah</td></tr>
<tr class="regular-row"><td>A4</td><td>Blah</td></tr>
<tr class="regular-row want"><td>A5</td><td>Blah</td></tr>
<tr class="section-header"><th colspan="2">Section B</th></tr>
<tr class="regular-row want"><td>B1</td><td>Blah</td></tr>
<tr class="regular-row"><td>B2</td><td>Blah</td></tr>
<tr class="regular-row want"><td>B3</td><td>Blah</td></tr>
<tr class="regular-row"><td>B4</td><td>Blah</td></tr>
<tr class="section-header"><th colspan="2">Section C</th></tr>
<tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
<tr class="regular-row"><td>C1</td><td>Blah</td></tr>
<tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
<tr class="section-header"><th colspan="2">Section D</th></tr>
<tr class="regular-row want"><td>C1</td><td>Blah</td></tr>
<tr class="regular-row"><td>C1</td><td>Blah</td></tr>
</table>
1条答案
按热度按时间m1m5dgzv1#
我建议使用嵌套的表或一系列tbody元素,这两种方法都可以简化操作。