layui表格怎么把表头固定

layui表格怎么把表头固定

使用layui流加载,css解决如何固定表头,以及解决表格表头和表格内容对不齐问题。

HTML代码:

  1.  

登录后复制    

            @for(var item in zkColumnDescs){        @if(item.field != ‘equipId’){         ${item.title}

                @}        @}        

        

js代码:

  1. 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 ' + item[fields[i]] + '');                        }                        var lisTd = lisTr.join('');                        if (index + 1 == res.data.length) {                            lis.push('' + lisTd + '');                        } else {                            lis.push('' + lisTd + '');                        }                    });                    next(lis.join(''), page 

    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)}
  2. 登录后复制

  3. 推荐:layui框架教程

  4. 以上就是layui表格怎么把表头固定的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    怎么使用layui弹出表单

    2025-3-13 1:10:11

    编程技术

    layui如何判定密码不一致

    2025-3-13 1:10:24

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索