css表格隔行背景颜色如何设置-css教程-PHP中文网

css表格隔行背景颜色如何设置

P粉602998670

发布： 2025-10-05 16:19:02

原创

853人浏览过

使用:nth-child伪类可轻松实现表格隔行变色，通过tr:nth-child(even)和tr:nth-child(odd)分别为偶数行和奇数行设置不同背景色，若存在表头则用tbody tr限定范围，也可仅设置偶数行颜色以简化代码，配合border-collapse:collapse优化边框显示效果。

css表格隔行背景颜色如何设置

要设置CSS表格隔行背景颜色，最简单的方法是使用 :nth-child 伪类选择器。通过它可以选择奇数行或偶数行，并为它们分别设置不同的背景色，从而实现隔行变色的效果。

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

这种方法适用于表格中的 tr 元素，可以分别为偶数行和奇数行设置背景颜色。

示例代码：

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

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

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

登录后复制

说明：

nth-child(even) 选中第2、4、6……行
nth-child(odd) 选中第1、3、5……行
配合 border-collapse: collapse 可避免边框间隙影响视觉效果

2. 忽略表头的隔行着色

如果表格有 thead 和 tbody，通常希望从 tbody 开始隔行变色，避免表头被影响。

示例：

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

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

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

登录后复制

这样只有数据行会应用交替背景色，表头保持独立样式。

3. 简化写法：只设置一种颜色

多数情况下，只需为偶数行添加背景色，奇数行保持默认即可。

常用简洁写法：

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

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

登录后复制

这种方式更高效，视觉上同样清晰易读。基本上就这些。使用 :nth-child 是现代浏览器推荐做法，兼容性好，写法简洁，能快速实现表格隔行变色效果。

以上就是css表格隔行背景颜色如何设置的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题