layui表格中怎么固定表頭

本篇文章給大家分享的是有關layui表格中怎么固定表頭，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

使用layui流加載，CSS解決如何固定表頭，以及解決表格表頭和表格內容對不齊問題。

HTML代碼：

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

js代碼：

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('<td>' + item[fields[i]] + '</td>');                        }                        var lisTd = lisTr.join('');                        if (index + 1 == res.data.length) {                            lis.push('<tr style="background-color: #1E9FFF">' + lisTd + '</tr>');                        } else {                            lis.push('<tr>' + lisTd + '</tr>');                        }                    });                    next(lis.join(''), 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代碼：

//控制表格滑動table tbody {    display: block;    overflow-y: scroll;}//固定表頭table thead, tbody tr {    display: table;    width: 100%;    table-layout: fixed;}//調節表頭寬度table thead {    width: calc(100% - 1em)}

以上就是layui表格中怎么固定表頭，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。