layui表格怎么把表头固定

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

<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>

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框架教程

以上就是layui表格怎么把表头固定的详细内容，更多内容请关注技术你好其它相关文章！