使用CSS的:nth-child选择器可为HTML表格设置斑马纹，通过tr:nth-child(even)为偶数行添加背景色，结合border-collapse和内边距提升可读性，推荐使用柔和配色并限定tbody范围以避免影响表头样式。
给HTML表格设置斑马纹效果，可以让表格更易读，尤其在数据行较多时。实现这一效果最常用的方法是使用CSS的 :nth-child 选择器，为表格的奇数行或偶数行添加不同的背景色。
基本HTML表格结构
先看一个简单的表格结构：
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
使用 :nth-child 实现斑马纹
通过CSS选择偶数行（或奇数行）并设置背景色，即可实现斑马纹效果。
例如，为偶数行添加浅灰色背景：
立即学习“前端免费学习笔记（深入）”；
table {
width: 100%;
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
说明：
- tr:nth-child(even) 选中所有偶数行（第2、4、6...行）
- tr:nth-child(odd) 可用于选中奇数行
- 建议设置 border-collapse: collapse 避免边框重复
- 为表头（th）和单元格（td）设置内边距和边框提升可读性
优化与注意事项
如果表格有多个 这样只对 颜色搭配建议使用柔和的对比色，避免视觉疲劳。例如浅灰、米白、淡蓝等。 基本上就这些。利用 :nth-child 能轻松实现美观的斑马纹表格，不需要额外的class，维护也方便。 或需要排除表头行，可以更精确地选择：
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
中的数据行生效，避免影响表头样式。
