使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题

先上HTML部分的代码：

<table class="layui-table">
    <thead class="top-head">
    <tr>
        @for(var item in zkColumnDescs){
        @if( != 'equipId'){
        <th class="thead-tr-width">${}</th>
        <input type="hidden" value="${}"/>
        @}
        @}
    </tr>
    </thead>
    <tbody >
    </tbody>
</table>

接下来是JS部分：

('flow', function () {
    var flow = ;
    ({
        elem: '#LAY_demo1' //流加载容器
        , scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
        , done: function (page, next) { //执行下一页的回调
            var fields = [];
            $.each($("input[type='hidden']"), function (i, o) {
                ($(o).val());
            });
            var lis = [];
            $.ajax({
                type: 'POST',
                url: '${ctxPath}/zkEquipment/zkEquipmentReadingMode/' + page,
                success: function (res) {
                    $.each(, function (index, item) {
                        var lisTr = [];
                        for (var i = 0; i < ; i++) {
                            ('<td>' + item[fields[i]] + '</td>');
                        }
                        var lisTd = ('');
                        if (index + 1 == ) {
                            ('<tr style="background-color: #1E9FFF">' + lisTd + '</tr>');
                        } else {
                            ('<tr>' + lisTd + '</tr>');
                        }

                    });
                    next((''), page < );
                    //解决th与td宽度不一致问题
                    var thArr = $("th");
                    var tdArr = $("tr").eq(1).find("td");
                    for (var i = 0; i < ; i++) {
                        $(thArr[i]).attr("width", $(tdArr[i]).outerWidth());
                    }
                    //设置高度
                    $("tbody").height($("body").height());
                }
            });

        }
    });

});

 

 最重要的CSS部分：

table tbody {
    display: block;
    overflow-y: scroll;
}

table thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

table thead {
    width: calc(100% - 1em)
}