使用:nth-child伪类可轻松实现表格隔行变色，通过tr:nth-child(even)和tr:nth-child(odd)分别为偶数行和奇数行设置不同背景色，若存在表头则用tbody tr限定范围，也可仅设置偶数行颜色以简化代码，配合border-collapse:collapse优化边框显示效果。
要设置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 开始隔行变色，避免表头被影响。
示例：
九歌
九歌–人工智能诗歌写作系统
322 查看详情
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表格隔行背景颜色如何设置的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1029988.html
微信扫一扫 
支付宝扫一扫 
