如何使用CSS为指定HTML表格实现交叉条纹效果？

嘿，我来帮你搞定这个表格的交叉条纹效果！用CSS的:nth-child()伪类就能轻松实现，核心思路是通过行和列的背景色叠加，形成交叉的视觉效果。下面给你两种适配不同需求的方案：

方案一：固定某列+行条纹交叉（匹配你的HTML结构） #

你的HTML里已经标注了第二列为"grey"，我们可以给这列固定灰色背景，再叠加行条纹的效果，让交叉区域颜色有层次感：

完整HTML代码（补全了你的tfoot部分） #

<table id="a">
  <thead>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>normal</td>
      <td>grey</td>
      <td>normal</td>
    </tr>
  </tfoot>
</table>

对应的CSS代码 #

/* 表格基础样式：合并边框、调整内边距，让布局更规整 */
#a {
  border-collapse: collapse;
  width: 100%;
}

#a td {
  padding: 8px;
  border: 1px solid #ddd;
}

/* 给所有偶数行设置浅灰色背景，实现行条纹 */
#a tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 给第二列设置固定的基础灰色 */
#a td:nth-child(2) {
  background-color: #e0e0e0;
}

/* 偶数行的第二列，设置更深一点的灰色，形成交叉的层次感 */
#a tr:nth-child(even) td:nth-child(2) {
  background-color: #d0d0d0;
}

方案二：通用棋盘格交叉条纹 #

如果你想要所有列都交替形成棋盘格一样的交叉效果，而不是固定某一列，可以用这个方案：

CSS代码 #

/* 表格基础样式和上面一致 */
#a {
  border-collapse: collapse;
  width: 100%;
}

#a td {
  padding: 8px;
  border: 1px solid #ddd;
}

/* 奇数行的奇数列、偶数行的偶数列设置背景色，形成棋盘格交叉 */
#a tr:nth-child(odd) td:nth-child(odd),
#a tr:nth-child(even) td:nth-child(even) {
  background-color: #f2f2f2;
}

这两种方案都能实现你要的交叉条纹效果，你可以根据自己的实际需求选择~

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