如何为HTML表格设置两行一组的条纹样式？

方法1：使用CSS :nth-child() 选择器（无需修改HTML） #

如果不能调整现有HTML结构，可以通过精准的nth-child选择器为每两行的分组设置样式：

/* 为第1-2行、5-6行等奇数分组添加浅灰背景 */
tbody tr:nth-child(4n+1),
tbody tr:nth-child(4n+2) {
  background-color: #f8f9fa;
}

/* 为第3-4行、7-8行等偶数分组添加深灰背景 */
tbody tr:nth-child(4n+3),
tbody tr:nth-child(4n+4) {
  background-color: #e9ecef;
}

原理：4n+1和4n+2会匹配每4行中的前两行（对应一组数据行+行动行），4n+3和4n+4匹配后两行，以此实现分组样式统一。

方法2：添加自定义类名（更灵活易维护） #

如果可以修改HTML代码，给每组的两行添加相同的类名，样式控制会更直观：

修改后的HTML：

<table>
    <tbody>
        <tr class="data-group"><td>First data row</td></tr>
        <tr class="data-group"><td>Actions of the first row</td></tr>
        <tr class="data-group"><td>Second data row</td></tr>
        <tr class="data-group"><td>Actions of the second data row</td></tr>
        <tr class="data-group"><td>Third data row</td></tr>
        <tr class="data-group"><td>Actions of the third data row</td></tr>
        <tr class="data-group"><td>Fourth data row</td></tr>
        <tr class="data-group"><td>Actions of the fourth data row</td></tr>
    </tbody>
</table>

对应的CSS：

/* 给奇数分组设置样式 */
tbody tr.data-group:nth-of-type(4n+1),
tbody tr.data-group:nth-of-type(4n+2) {
  background-color: #f8f9fa;
}

/* 给偶数分组设置样式 */
tbody tr.data-group:nth-of-type(4n+3),
tbody tr.data-group:nth-of-type(4n+4) {
  background-color: #e9ecef;
}

如果后续分组数量变化，这种方式更容易调整样式规则。

方法3：CSS Grid重构（适合布局重构场景） #

如果允许重构表格布局，可以用CSS Grid将每组两行作为一个独立单元，实现更灵活的样式控制：

tbody {
  display: grid;
  gap: 10px; /* 分组之间的间距 */
}

/* 将行内容暴露给父Grid容器 */
tbody tr {
  display: contents;
}

/* 定义分组容器 */
.data-group-wrapper {
  display: grid;
  background-color: #f8f9fa;
  border-radius: 4px;
}

/* 交替分组样式 */
.data-group-wrapper:nth-child(even) {
  background-color: #e9ecef;
}

修改后的HTML（需要用容器包裹每组两行）：

<table>
    <tbody>
        <div class="data-group-wrapper">
            <tr><td>First data row</td></tr>
            <tr><td>Actions of the first row</td></tr>
        </div>
        <div class="data-group-wrapper">
            <tr><td>Second data row</td></tr>
            <tr><td>Actions of the second data row</td></tr>
        </div>
        <!-- 后续分组同理 -->
    </tbody>
</table>

这种方式能实现更丰富的分组样式，比如圆角、内边距等。

内容的提问来源于stack exchange，提问作者Ali EXE