小编给大家分享一下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表格如何把表头固定有了一定的了解,想了解更多相关知识,欢迎关注天达云行业资讯频道,感谢各位的阅读!