小編給大家分享一下layui表格如何把表頭固定，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

專業(yè)領(lǐng)域包括網(wǎng)站建設(shè)、成都做網(wǎng)站、商城建設(shè)、微信營銷、系統(tǒng)平臺(tái)開發(fā)， 與其他網(wǎng)站設(shè)計(jì)及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)建站的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

使用layui流加載，CSS解決如何固定表頭，以及解決表格表頭和表格內(nèi)容對(duì)不齊問題。

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' //滾動(dòng)條所在元素，一般不用填，此處只是演示需要。
        , done: function (page, next) { //執(zhí)行下一頁的回調(diào)
            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());
                    }
                    //設(shè)置高度
                    $("tbody").height($("body").height());
                }
            });

        }
    });

});

css代碼：

//控制表格滑動(dòng)
table tbody {
    display: block;
    overflow-y: scroll;
}
//固定表頭
table thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
//調(diào)節(jié)表頭寬度
table thead {
    width: calc(100% - 1em)
}

看完了這篇文章，相信你對(duì)layui表格如何把表頭固定有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！