如何使用CSS为表格中每个顶级列的最后子列设置自定义样式

嘿，我来帮你搞定这个问题！根据你给出的表格结构，我们可以用两种实用的方式实现每个顶级列最后子列的绿色背景效果，一起来看看：

方法一：使用CSS :nth-child() 选择器（适合结构固定的表格） #

你的表格里，每个顶级列的子列数量是固定的：

• 「First」列包含3个子列，最后一个子列是整行的第3个<td>
• 「Second」列包含2个子列，最后一个子列是整行的第5个<td>（3+2）
• 「Third」「Fourth」「Fifth」各占1个子列，所以它们本身就是各自组的最后一列，对应整行的第6、7、8个<td>

直接用:nth-child()精准选中这些位置的单元格，就能设置背景色：

tbody tr td:nth-child(3),
tbody tr td:nth-child(5),
tbody tr td:nth-child(6),
tbody tr td:nth-child(7),
tbody tr td:nth-child(8) {
  background-color: green;
}

这种方式不需要修改HTML代码，适合表格结构长期不变的场景。

方法二：给目标单元格添加类名（更灵活易维护） #

如果担心后续表格结构（比如顶级列的colspan）会变化，给每个需要特殊样式的单元格加一个类名是更稳妥的选择：

修改后的HTML片段： #

<tr>
  <!-- First col -->
  <td> data </td>
  <td> data </td>
  <td class="last-col-in-group"> this one </td>
  <!-- Second col -->
  <td> data </td>
  <td class="last-col-in-group"> this one </td>
  <!-- Remain cols -->
  <td class="last-col-in-group"> data </td>
  <td class="last-col-in-group"> data </td>
  <td class="last-col-in-group"> data </td>
</tr>

对应的CSS： #

.last-col-in-group {
  background-color: green;
}

这种方式的优势在于，不管后续顶级列的子列数量怎么调整，只要把类名加到对应组的最后一个单元格上就行，不需要修改CSS规则，维护起来更省心。

备注：内容来源于stack exchange，提问作者Waqar Ali