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