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表格中怎么固定表头，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。