layui表格怎么把表头固定
使用layui流加载,css解决如何固定表头,以及解决表格表头和表格内容对不齐问题。
HTML代码:
${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 ' + item[fields[i]] + ''); } var lisTd = lisTr.join(''); if (index + 1 == res.data.length) { lis.push('<tr>' + lisTd + '</tr>'); } else { lis.push('<tr>' + lisTd + '</tr>'); } }); next(lis.join(''), page <p>css代码:</p><pre class="brush:css;toolbar:false">//控制表格滑动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框架教程