使用:nth-child实现表格条纹效果可提升可读性，通过even和odd设置奇偶行不同背景色，示例代码包含table样式及td、th格式；若含thead，应用tbody tr:nth-child(even)避免影响表头；还可自定义周期，如3n使每三行变色，增强数据分组展示效果。

在CSS初级项目中，给表格添加条纹效果能提升数据的可读性。通过 :nth-child 伪类选择器，可以轻松实现隔行变色的效果。

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

表格条纹通常是让偶数行和奇数行显示不同背景色。利用 :nth-child(even) 选中偶数行，:nth-child(odd) 选中奇数行，即可设置交替颜色。

示例代码：

table {
  width: 100%;
  border-collapse: collapse;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

只对 tbody 中的行应用条纹

如果表格包含表头（thead），建议仅对 tbody 内的行设置条纹，避免影响标题行样式。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

修改选择器如下：

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

这样 thead 中的标题行保持原样，内容行仍具备清晰的条纹区分。

自定义条纹周期（如每3行变色）

除了默认的奇偶行，还可以用公式 an+b 实现更复杂的模式。例如每3行为一组变色：

tr:nth-child(3n) {
  background-color: #e0f7fa;
}

这会让第3、6、9……行使用指定背景色，适合分组展示数据。

基本上就这些。掌握 :nth-child 的基本用法后，表格样式会更清晰美观，也不难维护。