使用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中定义样式规则即可。
你可以分别为奇数行和偶数行设置不同的背景颜色，从而形成条纹效果：
table {
width: 100%;
border-collapse: collapse;
}
<p>tr:nth-child(odd) {
background-color: #f2f2f2;
}</p><p>tr:nth-child(even) {
background-color: #ffffff;
}</p><p>/<em> 可选：添加边框或悬停效果 </em>/
tr:hover {
background-color: #ddd;
}</p>在这个例子中，奇数行（1、3、5...）使用浅灰色背景，偶数行（2、4、6...）为白色，视觉上呈现交替条纹。
如果表格包含 thead 或 tfoot，建议只对 tbody 内的行添加条纹，避免标题行被影响：
立即学习“前端免费学习笔记（深入）”；
tbody tr:nth-child(odd) {
background-color: #f9f9f9;
}
<p>tbody tr:nth-child(even) {
background-color: #fff;
}</p>这样能确保表头保持独立样式，条纹仅作用于数据行。
若想从第2行开始应用条纹（比如第一行是标题但未用 thead 包裹），可以用以下写法：
tr:nth-child(odd):nth-child(n+2) {
background-color: #f2f2f2;
}
这个选择器表示“从第2行开始的奇数行”，适合不规范结构的表格美化。
基本上就这些。利用 :nth-child 实现表格条纹简单高效，配合语义化标签如 thead 和 tbody 效果更佳。不复杂但容易忽略细节。
以上就是css如何给表格增加条纹效果_使用nth-child选择器交替背景颜色的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
460
收藏
