css如何给表格增加条纹效果_使用nth-child选择器交替背景颜色

使用CSS的:nth-child选择器可为表格添加条纹效果：通过tr:nth-child(odd)和tr:nth-child(even)设置奇偶行不同背景色，如#f2f2f2和#fff，并可配合tbody限定仅对数据行应用条纹，避免影响表头；若需跳过前n行，可用:nth-child(odd):nth-child(n+2)实现从第二行开始着色，结合:hover还能增强交互效果，提升数据可读性。

给表格添加条纹效果可以让数据更易读，通过CSS的 :nth-child 选择器可以轻松实现奇偶行不同背景色的效果。这种方法无需修改HTML结构，只需在CSS中定义样式规则即可。

使用 :nth-child(odd) 和 :nth-child(even)

你可以分别为奇数行和偶数行设置不同的背景颜色，从而形成条纹效果：

table {
  width: 100%;
  border-collapse: collapse;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #ffffff;
}
/ 可选：添加边框或悬停效果 /
tr:hover {
background-color: #ddd;
}

在这个例子中，奇数行（1、3、5...）使用浅灰色背景，偶数行（2、4、6...）为白色，视觉上呈现交替条纹。

仅对 tbody 中的行应用条纹

如果表格包含 thead 或 tfoot，建议只对 tbody 内的行添加条纹，避免标题行被影响：

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

这样能确保表头保持独立样式，条纹仅作用于数据行。

使用 n + 数字跳过前几行

若想从第2行开始应用条纹（比如第一行是标题但未用 thead 包裹），可以用以下写法：

tr:nth-child(odd):nth-child(n+2) {
  background-color: #f2f2f2;
}

这个选择器表示“从第2行开始的奇数行”，适合不规范结构的表格美化。

基本上就这些。利用 :nth-child 实现表格条纹简单高效，配合语义化标签如 thead 和 tbody 效果更佳。不复杂但容易忽略细节。