使用CSS的:nth-child选择器可为HTML表格设置斑马纹，通过tr:nth-child(even)为偶数行添加背景色，结合border-collapse和内边距提升可读性，推荐使用柔和配色并限定tbody范围以避免影响表头样式。
给HTML表格设置斑马纹效果，可以让表格更易读，尤其在数据行较多时。实现这一效果最常用的方法是使用CSS的 :nth-child 选择器，为表格的奇数行或偶数行添加不同的背景色。
基本HTML表格结构
先看一个简单的表格结构：
<table><tr><th>姓名</th><th>年龄</th><th>城市</th></tr>
<tr><td>张三</td><td>25</td><td>北京</td></tr>
<tr><td>李四</td><td>30</td><td>上海</td></tr>
<tr><td>王五</td><td>28</td><td>广州</td></tr>
</table>
使用 :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）设置内边距和边框提升可读性
优化与注意事项
如果表格有多个 <tbody> 或需要排除表头行，可以更精确地选择：
background-color: #f9f9f9;
}
这样只对 <tbody> 中的数据行生效，避免影响表头样式。
颜色搭配建议使用柔和的对比色，避免视觉疲劳。例如浅灰、米白、淡蓝等。
基本上就这些。利用 :nth-child 能轻松实现美观的斑马纹表格，不需要额外的class，维护也方便。
