layui 调整表格样式

最新推荐文章于 2023-08-05 09:05:22 发布

追丰少年

最新推荐文章于 2023-08-05 09:05:22 发布

阅读量3.5w

点赞数

分类专栏： Layui前端框架文章标签： layui css html

本文链接：https://blog.csdn.net/Ghjkku/article/details/127430083

版权

Layui前端框架专栏收录该内容

5 篇文章 1 订阅

订阅专栏

引入即可

注意：

要在引入layui.css的后面引入才生效

/*layui表格样式设置*/

.layui-table[lay-even] tr:nth-child(even) {
    background-color: #32426d;
}

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

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

/*设置表格单元格线样式*/
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
    border-color: #263765; /*#bbb*/
}

/*layui table 行高*/
.layui-table-cell {
    height: 18px;
    line-height: 18px;
}

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

.layui-table-init{
    background-color: #263765;
}

tr {
    background-color: #17295a; /* MediumSeaGreen */
    color: #fff;
}

td {
    color: #fff;
}