How to fix the header of layui table

Using layui flow loading, CSS solves how to fix the table header and solve the problem of misalignment between the table header and the table content.

HTML code:

<table class="layui-table">
    <thead class="top-head">
    <tr>
        @for(var item in zkColumnDescs){
        @if(item.field != &#39;equipId&#39;){
        <th class="thead-tr-width">${item.title}</th>
        <input type="hidden" value="${item.field}"/>
        @}
        @}
    </tr>
    </thead>
    <tbody id="LAY_demo1">
    </tbody>
</table>

js code:

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

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

        }
    });

});

css code:

//控制表格滑动
table tbody {
    display: block;
    overflow-y: scroll;
}
//固定表头
table thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
//调节表头宽度
table thead {
    width: calc(100% - 1em)
}

Recommended: layui framework tutorial

The above is the detailed content of How to fix the header of layui table. For more information, please follow other related articles on the PHP Chinese website!