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

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://kswjz.com/article/dsipeo.html

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

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

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

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

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

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

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们