Home  >  Article  >  Web Front-end  >  How to fix the header of layui table

How to fix the header of layui table

尚
Original
2019-07-30 16:55:1614889browse

How to fix the header of layui table

Using layui flow loading, CSS solves how to fix the table header and solve the problem of misalignment between the table header and the table content.

HTML code:

<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 code:

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 code:

//控制表格滑动
table tbody {
    display: block;
    overflow-y: scroll;
}
//固定表头
table thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
//调节表头宽度
table thead {
    width: calc(100% - 1em)
}

Recommended: layui framework tutorial

The above is the detailed content of How to fix the header of layui table. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn