Use layui flow loading, CSS to solve how to fix the table header, and solve the table header and table content misalignment problem

Let's start with the HTML part of the code:

<table class="layui-table">
    <thead class="top-head">
    <tr>
        @for(var item in zkColumnDescs){
        @if( != 'equipId'){
        <th class="thead-tr-width">${}</th>
        <input type="hidden" value="${}"/>
        @}
        @}
    </tr>
    </thead>
    <tbody >
    </tbody>
</table>

Next up is the JS section:

('flow', function () {
    var flow = ;
    ({
        elem: '#LAY_demo1' // Stream loading container
        , scrollElem: '#LAY_demo1' // The element where the scrollbar is located, generally do not need to fill in, here is just a demonstration of the need.
        , done: function (page, next) { //Execute the callback for the next page
            var fields = [];
            $.each($("input[type='hidden']"), function (i, o) {
                ($(o).val());
            });
            var lis = [];
            $.ajax({
                type: 'POST',
                url: '${ctxPath}/zkEquipment/zkEquipmentReadingMode/' + page,
                success: function (res) {
                    $.each(, function (index, item) {
                        var lisTr = [];
                        for (var i = 0; i < ; i++) {
                            ('<td>' + item[fields[i]] + '</td>');
                        }
                        var lisTd = ('');
                        if (index + 1 == ) {
                            ('<tr style="background-color: #1E9FFF">' + lisTd + '</tr>');
                        } else {
                            ('<tr>' + lisTd + '</tr>');
                        }

                    });
                    next((''), page < );
                    //Solve th and td width inconsistency problem
                    var thArr = $("th");
                    var tdArr = $("tr").eq(1).find("td");
                    for (var i = 0; i < ; i++) {
                        $(thArr[i]).attr("width", $(tdArr[i]).outerWidth());
                    }
                    //Setting the height
                    $("tbody").height($("body").height());
                }
            });

        }
    });

});

 

The most important part of 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)
}