如何使用 css 为表格每隔三行添加斑马纹样式？
要为表格中的每三行数据添加不同的背景色，可以使用以下 纯 css 解决方案：
.table {
border-collapse: collapse;
}
.table td {
border: 1px solid #ddd;
}
.table tr {
background-color: #f9f9f9;
}
.table tr:nth-child(6n + 1),
.table tr:nth-child(6n + 2),
.table tr:nth-child(6n + 3) {
background-color: #ffffff;
}
.table tr:nth-child(6n + 4),
.table tr:nth-child(6n + 5),
.table tr:nth-child(6n + 6) {
background-color: #cccccc;
}要使用此样式，请将 .table 类应用于表格元素：
<table class="table">
<thead>
<tr> <th>COL 1</th> <th>COL 2</th> </tr>
</thead>
<tbody>
<!-- 表格数据 -->
</tbody>
</table>这将为表格中的每三行数据添加交替的背景色。
立即学习“前端免费学习笔记（深入）”；
以上就是如何使用 CSS 为表格每隔三行添加斑马纹样式？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
318
收藏
