设置td rowspan=2的HTML表格如何实现正确的斑马纹隔行着色

问题原因 #

你之前的写法不生效是因为nth-child()是按照DOM中的物理<tr>标签计数，而你每个逻辑Case对应2个物理行，所以会出现逐行变色的效果，无法实现同个条目两行同色。

解决办法 #

方案1：不修改现有HTML结构，仅调整CSS #

使用带步长的nth-child()选择器，每2个<tr>为一组设置相同背景色：

/* 匹配第1、2、5、6、9、10...行，对应奇数编号的Case */
tr:nth-child(4n + 1),
tr:nth-child(4n + 2) {
  background-color: #BDD7EE;
}
/* 匹配第3、4、7、8、11、12...行，对应偶数编号的Case */
tr:nth-child(4n + 3),
tr:nth-child(4n + 4) {
  background-color: #C6E0B4;
}

该方案无需改动现有表格结构，后端输出表格的逻辑完全不需要调整，适合数百条批量生成的表格数据场景。

方案2：增加语义化标签，可扩展性更强 #

HTML表格支持多个<tbody>标签，你可以把每个Case对应的2个<tr>包裹在独立的<tbody>中，再对<tbody>设置斑马纹：

调整后的HTML结构

<table>
  <!-- Case1 组 -->
  <tbody>
    <tr>
      <td rowspan="2">Case1</td>
      <td colspan="3">Issue1</td>
    </tr>
    <tr>
      <td colspan="3">Decision1</td>
    </tr>
  </tbody>
  <!-- Case2 组 -->
  <tbody>
    <tr>
      <td rowspan="2">Case2</td>
      <td colspan="3">Issue2</td>
    </tr>
    <tr>
      <td colspan="3">Decision2</td>
    </tr>
  </tbody>
  <!-- 其余Case按照相同结构生成即可 -->
</table>

对应CSS代码

tbody:nth-child(odd) tr {
  background-color: #BDD7EE;
}
tbody:nth-child(even) tr {
  background-color: #C6E0B4;
}

该方案结构语义更清晰，后续如果需要调整每个Case对应的行数（比如改为3行展示），CSS代码无需修改，可维护性更高。

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