layui使用table组件实现排序的CSS样式调整解决方案

外部文件引入

  <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="common.css">

table引入

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: 'user.json'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'sex', width: 80, title: '性别', sort: true}
                , {field: 'experience', title: '积分', sort: true}
                , {field: 'score', title: '评分', sort: true}
                , {field: 'wealth', width: 137, title: '财富', sort: true}
            ]]
        });
    });

common.css

body {
    background-color: #111633;
    color: #fff;
}

/*边框宽度*/
.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: 0px;
    cursor: pointer;
}

.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover {
    background-color: transparent;
    cursor: pointer;
    color: #FFF !important;
    font-weight: bold !important;
    border-bottom: 1px solid #272b4e;
}

.layui-table > thead > tr {
    background: transparent;
}

/*表头样式*/
.layui-table-header > .layui-table td {
    font-weight: bold;
}

/*设置表格单元格线样式*/
.layui-table {
    background: transparent;
}

.layui-table td, .layui-table th {
    border-color: transparent; /*#bbb*/
}

.layui-table tr {
    color: #FFF;
    border-bottom: 1px solid #272b4e;
}

.layui-table tr:first-child {
    color: #d14043;
}

.layui-table tr:nth-child(2) {
    color: #d9a56b;
}

.layui-table tr:nth-child(3) {
    color: #44e097;
}

lockdatav Done!