HTML页面table滚动条的实现

不言 2018-05-08 15:14 5515浏览原创

这篇文章主要介绍了关于HTML页面table滚动条的实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

table scrollbar & header fixed

有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。

主要解决了几点问题：
1.table实现横纵滚动条
2.table表头固定
3.table列宽自适应
4.table内容不换行

主要代码块

css：

            .table-scroll {
                width: calc(100% - 5px);
                overflow-x: scroll;
                white-space: nowrap;
            }

            .table-scroll table {
                table-layout: fixed;
                width: calc(100% - 10px);
                background-color:darkseagreen ;
            }

            .table-scroll thead {
                display: table-row;
                background-color: bisque;
            }

            .table-scroll tbody {
                overflow-y: scroll;
                overflow-x: hidden;
                display: block;
                height: calc(100vh - 300px);
            }

            .table-scroll th,td {
                width: 160px;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 160px;
                border: 1px solid #808080;
            }

            h4, h5 {
                color: cornflowerblue;
            }

js：

    $(function() {
            $('.table-scroll').scroll(function() {
                  $('.table-scroll table').width($('.table-scroll').width() 
                  + $('.table-scroll').scrollLeft());
                });

                var tableTdWidths = new Array();
            var tableWidth = 0;
            var tableTr0Width = 0;
            var tableThNum = 0;
            var tableTr1Width = 0;

                tableWidth = $('.table-scroll table').css('width').replace('px','');
                tableThNum = $('.table-scroll tr:eq(0)').children('th').length;            if ($('.table-scroll tr').length == 1) { // header only                if (tableWidth > tableTr0Width) {
                    $('.table-scroll tr:eq(0)').children('th').each(function(i){
                        $(this).width(parseInt(($(this).css('width').replace('px','')) 
                        + parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px');
                    });
                }
            } else { // header and body
                tableTr1Width = $('.table-scroll tr:eq(1)').css('width').replace('px','');
                    $('.table-scroll tr:eq(1)').children('td').each(function(i){
                    tableTdWidths[i]=$(this).css('width').replace('px','');
                });
                $('.table-scroll tr:eq(0)').children('th').each(function(i) {            if(parseInt($(this).css('width').replace('px', '')) >
                parseInt(tableTdWidths[i])) {
                tableTdWidths[i] = $(this).css('width').replace('px','');
                    }
                });                if (tableWidth > tableTr1Width) {
                    //set all th td width
                    $('.table-scroll tr').each(function(i){
                            $(this).children().each(function(j){
                                $(this).css('min-width',(parseInt(tableTdWidths[j]) 
                                + parseInt(Math.floor((tableWidth - tableTr1Width) / 
                                tableThNum))) + 'px');
                            });
                    });
                } else {
                    //method 1 : set all th td width
                    $('.table-scroll tr').each(function(i){
                            $(this).children().each(function(j){
                                $(this).css('min-width',tableTdWidths[j] + 'px');
                            });
                    });
                }
            }
            });

html：

    
        <h4>完成效果：1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行</h4>
        <p>
            </p>

title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1
1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
2	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
3	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
4	body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1	body1	body1	body1	body1	body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
5	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
6	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
7	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
8	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
9	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
10	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
11	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
12	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
13	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
14	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
15	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
16	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
17	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
18	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
19	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
20	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
21	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
22	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
23	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
24	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
25	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
26	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
27	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
28	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
28	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
29	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
30	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1