如何使用 CSS 为表格每隔三行添加斑马纹样式？

发布日期： 2024-11-02 阅读量： 作者： 网络

如何使用 css 为表格每隔三行添加斑马纹样式？

如何使用 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;
}

# css

上一篇: linux怎么修改只读权限

下一篇: linux怎么查看软件安装路径

如何使用 CSS 为表格每隔三行添加斑马纹样式？

随便看看