本篇文章给大家分享的是有关layui表格中怎么固定表头，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：
域名申请、
网站空间、营销软件、网站建设、
富川网站维护、网站推广。
使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题。
HTML代码：
@for(var item in zkColumnDescs){ @if(item.field != 'equipId'){ ${item.title} @} @}
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('| ' + item[fields[i]] + ' | '); } var lisTd = lisTr.join(''); if (index + 1 == res.data.length) { lis.push('' + lisTd + ''); } else { lis.push('' + lisTd + '
'); } }); 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表格中怎么固定表头-创新互联
标题URL：
http://cdxtjz.cn/article/ddeeed.html
