layui table使用的坑

先来个完整案例

<table class="layui-table" lay-even lay-skin="nob" id="FalutRecord" lay-filter="test"></table>

function layuiTable() {
    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#FalutRecord'
            , even: true///开启隔行背景
            , data: [{
                "id": 1,
                "name": "硬件设备名称",
                "big": "量大需量",
                "time": "需量发生时间",
                "lasttime": "上月需量",
                "lasttime_time": "上月需量发生时间"

            },
                {
                    "id": 2,
                    "name": "硬件设备名称",
                    "big": "量大需量",
                    "time": "需量发生时间",
                    "lasttime": "上月需量",
                    "lasttime_time": "上月需量发生时间"

                },
            ] //数据接口
            , page: true //开启分页
            , limit: 15//展示的最大行数
            , cols: [[ //表头
                { field: 'id', title: '序号', sort: true, align: 'center',}
                , { field: 'name', title: '变压器', sort: true, align: 'center'}
                , { field: 'big', title: '量大需量', sort: true, align: 'center' }
                , { field: 'time', title: '需量发生时间', sort: true, align: 'center' }
                , { field: 'lasttime', title: '上月需量', sort: true, align: 'center'}
                , { field: 'lasttime_time', title: '上月需量发生时间', sort: true, align: 'center'}
            ]],
            //表格加载完毕
            done: function (res, curr, count) {
                //监听表格的事件
                table.on('row(test)', function (obj) {
                });
            }
        });
    });
};
layuiTable()

鼠标移入不变色

.layui-table tbody tr:hover {
    background-color: white;
}

隔行变色

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

去掉表格边框

 table{
   border:none;
}
 .layui-table th {
    border-width: 0;
    border-style: none;
    border-color: none;
}
 .layui-table-header {
    border-width: 0;
    border-style: none;
    border-color: none;
}
 .layui-table td {
    border-width: 0;
    border-style: none;
    border-color: none;
}
.layui-table-view {
    border-width: 0;
    border-style: none;
    border-color: none;
}

 /*设置表格单元格线样式*/
    .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: #bbb; /*#bbb*/
    }