
如何使用 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 类应用于表格元素:
| COL 1 | COL 2 |
|---|
这将为表格中的每三行数据添加交替的背景色。
立即学习“前端免费学习笔记(深入)”;










