HTML页面table滚动条的实现

程序猿 • 2025年12月21日 17:54:00 • 好文分享 • 阅读 0

这篇文章主要介绍了关于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：

完成效果：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

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

关于作者

程序猿签约作者

382.1K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

HTML5+CSS3应用详解

上一篇 2025年12月21日 17:53:50

html5调用摄像头功能的实现代码

下一篇 2025年12月21日 17:54:07

Html禁止右键复制功能

这次给大家带来Html禁止右键复制功能，Html禁止右键复制的注意事项有哪些，下面就是实战案例，一起来看一下。禁止右键菜单禁止左键划字复制采用CSS来控制是否可以选择文字 .unselectable { user-select: none;}you can select me.You can’…

程序猿
好文分享 2025年12月21日
0000
在HTML文档中嵌入JavaScript的四种方法

本篇文章主要介绍了在html文档里嵌入客户端javascript代码有4中方法，感兴趣的小伙伴们可以参考一下，具体如下：在HTML里嵌入JavaScript 在HTML文档里嵌入客户端JavaScript代码有4中方法： 1.内嵌，放置在和标签之间（少）； 2.放置在有标签的src属性指定的外…

程序猿
好文分享 2025年12月21日
0000
好文分享

HTML实现简单计算器附详细思路

大概思路就是将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中,需要的朋友可以参考下复制代码代码如下: Calculator var numresult; var str; function onclicknum(nums) { str = do…

程序猿
2025年12月21日
0000
好文分享

JavaScript与HTML的结合方法详解

这篇文章主要介绍了javascript与html的结合方法，利用实例向大家介绍javascript与html是如何结合的，内容很详细，感兴趣的小伙伴们可以参考一下 HTML中的JavaScript脚本必须位于与标签之间，JavaScript脚本可被放置在HTML页面的标签和标签中，这种视情况而定，…

程序猿
2025年12月21日
0000
向HTML中插入视频并兼容所有浏览器的方法

这篇文章主要介绍了关于向html中插入视频并兼容所有浏览器的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下向HTML中插入视频有两种方法，一种是古老的object标签，一种是html5中的video标签，前者兼容性相对好些，后者兼容性让人头疼最常用的向HTML中插入视频的方法…

程序猿
好文分享 2025年12月21日
0000
好文分享

Html制作简单而漂亮的登录页面

这篇文章主要为大家详细介绍了html制作简单而漂亮的登录页面具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下先来看看样子。 html源码： XML/HTML Code复制内容到剪贴板 Login Login 登录 css代码：立即学习“前端免费学习笔记（深入）”； CSS Code复制…

程序猿
2025年12月21日
0000
好文分享

HTML代码制作滚动文字

这篇文章主要介绍了关于html代码制作滚动文字，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下本节笔者讲述HTML代码中比较特殊的标签，它能使网页中的文字滚动，并且可以控制其滚动的属性。制作滚动文字通过本章前面的学习，读者已经能够很好地控制各种段落文字…

程序猿
2025年12月21日
0000
html文件的中文乱码问题与在浏览器中的显示问题

这篇文章主要介绍了关于html文件的中文乱码问题与在浏览器中的显示问题，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下我今天的页面也是出现了乱码，所以在网上查找了相关的问题，看来一下，这个方法挺不错的，我也试验了呢，我用的editp编辑器，在文档—文件编码—更改文件编码—选择自己所需…

程序猿
2025年12月21日 • 好文分享
0000
HTML实现页面自动跳转的五种方法

这篇文章主要介绍了关于html实现页面自动跳转的五种方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在上篇文章给大家介绍了HTML页面3秒后自动跳转的三种常见方法，本文继续给大家介绍有关html页面跳转相关知识，一起学习吧。下面列了五个例子来详细说明，这几个例子的主要功能是：在5…

程序猿
好文分享 2025年12月21日
0000
html标签分类

将 HTML 元素按功能进行分组。先简单会汇总下，熟悉的放前面。根元素: 文档元数据:、、、内容分区:、、、、、~ 、、、文本内容:、、、、、、、、、、、、、内联文本语义:、、、、、、、、、、、、、、、、、、、、、、、、、、、、、图片和多媒体:@@##@@ 内嵌内容:、@@@#…

程序猿
好文分享 2025年12月21日
0000
HTML基础之选择器

这篇文章介绍的内容是关于HTML基础之选择器，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下选择器的作用可以在样式表里更加方便快捷的对html的各种样式以及属性进行操作分类 1、标签类型选择器：对标签设置样式 a{ text-decoration: none;} 2、包含选择符…

程序猿
好文分享 2025年12月21日
0000
Html实现歌曲歌词同步

这篇文章主要介绍了关于Html实现歌曲歌词同步，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下歌词同步 body { background:url(“Img/起风了.jpg”) center no-repeat ; background-size:60% 100%; } * { ma…

程序猿
好文分享 2025年12月21日
0000
HTML 文本格式化

这篇文章主要介绍了关于HTML 文本格式化，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 html 文本格式化自选教程(如约智惠.com)加粗文本斜体文本电脑自动输出这是下标和上标实例文本格式化自选教程(如约智惠.com)这个文本是加粗的这个文本是加粗的这个文本字体放大…

程序猿
好文分享 2025年12月21日
0000
html自适应字号

这篇文章主要介绍了关于html自适应字号，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下在开发过程中有遇到需要根据界面dom的宽高来设置自适应字号大小，现将开发思路分享在页面dom元素的宽和高都有限制的情况下，无法为所有的元素设置同样的字号大小，而将字号设置过小又不利于界面美观，所…

程序猿
好文分享 2025年12月21日
0000
HTML中重要的关键字

这篇文章主要介绍了关于HTML中重要的关键字，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 bgcolor网页颜色background背景图片br 换行hr 水平线id 唯一的名字class 类（同一个国家）font 控制网页文本的显示外观img里面的 alt属性：用来在图片上提示…

程序猿
好文分享 2025年12月21日
0000
好文分享

HTML 速查列表

这篇文章主要介绍了关于HTML 速查列表，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 HTML 基本文档文档标题可见文本… 基本标签（Basic Tags）最大的标题 . . . . . . . . . . . . 最小的标题这是一个段落。（换行）（水平线）文本格…

程序猿
2025年12月21日
0000
springboot集成html之分页功能实现

这篇文章主要介绍了关于springboot集成html之分页功能实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下说不清楚，直接上代码。和展示效果：前台：陪米app后台主页 var pageNo = 1;var pageSize = 8;var pages = 0;//&lt…

程序猿
2025年12月21日 • 好文分享
0000
好文分享

HTML页面原生VIDEO标签隐藏下载按钮功能

这篇文章主要介绍了html页面原生video标签隐藏下载按钮功能，非常不错，具有参考借鉴价值，需要的朋友参考下吧在写web项目的时候，遇到简介页面有一个单独的简介视频，只有这一个短短的视频所以没有使用任何video组件，所以运用原生video标签就想解决问题。虽然简介视频是非付费的，但也不希望会…

程序猿
2025年12月21日
0000
HTML 实现背景图片的替换

这篇文章介绍的内容是关于HTML 实现背景图片的替换，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 @@##@@ var curIndex = 0;var timeInterval = 3000; //切换时间 3秒可以修改var arr = new Array();arr[0…

程序猿
好文分享 2025年12月21日
0000
html设置表格边框样式

这篇文章介绍的内容是html设置表格边框样式，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下 html设置表格边框样式设置表格边框样式 .border_distance{ border-collapse: collapse; /**设置小表格之间的间距为0*/ border-…

程序猿
好文分享 2025年12月21日
0000