首頁 > 文章 > web前端 > layui表格怎麼把表頭固定

layui表格怎麼把表頭固定

尚原創: 2019-07-30 16:55:1614755瀏覽

layui表格怎麼把表頭固定

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

HTML程式碼：

<table class="layui-table">
    <thead class="top-head">
    <tr>
        @for(var item in zkColumnDescs){
        @if(item.field != &#39;equipId&#39;){
        <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(&#39;flow&#39;, function () {
    var flow = layui.flow;
    flow.load({
        elem: &#39;#LAY_demo1&#39; //流加载容器
        , scrollElem: &#39;#LAY_demo1&#39; //滚动条所在元素，一般不用填，此处只是演示需要。
        , done: function (page, next) { //执行下一页的回调
            var fields = [];
            $.each($("input[type=&#39;hidden&#39;]"), function (i, o) {
                fields.push($(o).val());
            });
            var lis = [];
            $.ajax({
                type: &#39;POST&#39;,
                url: &#39;${ctxPath}/zkEquipment/zkEquipmentReadingMode/&#39; + page,
                success: function (res) {
                    $.each(res.data, function (index, item) {
                        var lisTr = [];
                        for (var i = 0; i < fields.length; i++) {
                            lisTr.push(&#39;<td>&#39; + item[fields[i]] + &#39;</td>&#39;);
                        }
                        var lisTd = lisTr.join(&#39;&#39;);
                        if (index + 1 == res.data.length) {
                            lis.push(&#39;<tr style="background-color: #1E9FFF">&#39; + lisTd + &#39;</tr>&#39;);
                        } else {
                            lis.push(&#39;<tr>&#39; + lisTd + &#39;</tr>&#39;);
                        }

                    });
                    next(lis.join(&#39;&#39;), 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表格怎麼把表頭固定

相關文章