layui表格怎么把表头固定


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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 < fields.length; i++) {

                            lisTr.push('<td>' + item[fields[i]] + '</td>');

                        }

                        var lisTd = lisTr.join('');

                        if (index + 1 == res.data.length) {

                            lis.push('<tr style="background-color: #1E9FFF">' + lisTd + '</tr>');

                        } else {

                            lis.push('<tr>' + lisTd + '</tr>');

                        }

 

                    });

                    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());

                    }

                    //设置高度

                    $("tbody").height($("body").height());

                }

            });

 

        }

    });

 

});

css代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

//控制表格滑动

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框架教程

以上就是layui表格怎么把表头固定的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

layui框架属于前端还是后端

layui table模块对表格数据处理后的排序问题

基于layui的步骤条面板(附代码)

layui图片如何放大

layui兼容ie8吗

表格工具按钮列显示更多时也能触发table的事件

layui使用入门教程

layui怎么添加icon

layui icon是什么

html表格的标签是什么

更多相关阅读请进入《layui》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...