layui设置table的各种背景色

最新推荐文章于 2024-09-24 15:45:18 发布

cangshuo1961

最新推荐文章于 2024-09-24 15:45:18 发布

阅读量1.3w

点赞数 4

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/1197822/2436417

版权

本文介绍如何使用CSS自定义layui表格的样式，包括设置偶数行背景色、鼠标悬停效果及头部工具栏背景色，通过具体代码实现表格美观展现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加以下内容到指定CSS文件,并引入项目即可生效

/* 偶数行背景色 */
.layui-table[lay-even] tr:nth-child(even) {
    /* background-color: #aaffaa; */
    background-color: #eeffee;
}

/* 鼠标指向表格时,奇数行背景颜色 */
.layui-table tbody tr:hover,.layui-table-hover {
    background-color: #eeffee;
}

/* 表格头部工具栏背景色 */
.layui-table-tool {
    background-color: #eeffee;
}

/* 表格头部背景色 */
th {
    background-color: #359f6a; /* MediumSeaGreen */
    color: #fff;
    font-weight: bold
}