HTML页面如何实现table滚动条-创新互联

小编给大家分享一下HTML页面如何实现table滚动条,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

十年的礼县网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同,自动调整礼县建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联公司从事“礼县网站设计”,“礼县网站推广”以来,每个客户项目都认真落实执行。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;
            }

            h5, h6 {
                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:


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

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

网上也有很多的例子,但是实现的效果不是想要的,自己工作需要做了一下,画面不好看,重点看效果,如有问题请指正!

看完了这篇文章,相信你对HTML页面如何实现table滚动条有了一定的了解,想了解更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道,感谢各位的阅读!


分享名称:HTML页面如何实现table滚动条-创新互联
网站URL:http://myzitong.com/article/dsipeo.html