layui表格如何把表头固定-创新互联

小编给大家分享一下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表格如何把表头固定有了一定的了解，想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。