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

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

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

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

HTML5+CSS3应用详解

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

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

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

好文分享

实施绝对定位的参照方法选择指南

选择合适的参照方法实现绝对定位，需要具体代码示例在Web开发中，绝对定位是一种常用的布局方式，通过定位元素相对于其最近的已定位祖先元素，来精确地控制元素在页面中的位置。而选择合适的参照方法实现绝对定位，则会使我们的布局更加灵活和易于维护。一、参照方法的选择直接参照文档流在实现绝对定位时，默认情…

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

绝对定位参考方法的实现

实现绝对定位的参照方法，需要具体代码示例随着Web开发的不断发展，对于页面布局的要求也越来越高。绝对定位是一种常用的布局方式，可以精确地指定元素在页面中的位置。本文将介绍如何通过CSS来实现绝对定位，并提供具体的代码示例。一、理解绝对定位的基本概念在开始编写代码之前，首先需要了解绝对定位的基本…

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

学会从头开始学习CSS，掌握制作基本网页框架的技巧

从零开始学习CSS，掌握网页基本框架制作技巧前言：在现今互联网时代，网页设计和开发是一个非常重要的技能。而学习CSS（层叠样式表）是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局，还可以为用户呈现独特且具有吸引力的页面效果。在本文中，我将为您介绍一些基本的CSS知识，以及一些常用的代…

程序猿
2025年12月24日
2000
好文分享

揭秘Web标准涵盖的语言：了解网页开发必备的语言范围

在当今数字时代，互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位，网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术，离不开一些必备的语言。本文将揭秘Web标准涵盖的语言，让我们一起了解网页开发所需的语言范围。首先，HTML（HyperText Markup La…

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

揭开Web开发的语言之谜：了解构建网页所需的语言有哪些？

Web标准中的语言大揭秘：掌握网页开发所需的语言有哪些？随着互联网的快速发展，网页开发已经成为人们重要的职业之一。而要成为一名优秀的网页开发者，掌握网页开发所需的语言是必不可少的。本文将为大家揭示Web标准中的语言大揭秘，介绍网页开发所需的主要语言。 HTML（超文本标记语言）HTML是网页开发的…

程序猿
2025年12月24日
4000
好文分享

常用的网页开发语言：了解Web标准的要点

了解Web标准的语言要点：常见的哪些语言应用在网页开发中？随着互联网的不断发展，网页已经成为人们获取信息和交流的重要途径。而要实现一个高质量、易用的网页，离不开一种被广泛接受的Web标准。Web标准的制定和应用，涉及到多种语言和技术，本文将介绍常见的几种语言在网页开发中的应用。首先，HTML（H…

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

网页开发中常见的Web标准语言有哪些？

探索Web标准语言的世界：网页开发中常用的语言有哪些？在现代社会中，互联网的普及程度越来越高，网页已成为人们获取资讯、娱乐、交流的重要途径。而网页的开发离不开各种编程语言的应用和支持。在这个虚拟世界的网络，有许多被广泛应用的标准化语言，用于为用户提供优质的网页体验。本文将探索网页开发中常用的语言，…

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

深入探究Web标准语言的范围，涵盖了哪些语言？

Web标准是指互联网上的各个网页所需遵循的一系列规范，确保网页在不同的浏览器和设备上能够正确地显示和运行。这些标准包括HTML、CSS和JavaScript等语言。本文将深入解析Web标准涵盖的语言范围。首先，HTML（HyperText Markup Language）是构建网页的基础语言。它使…

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

使用CSS实现文本渐变效果的方法

使用CSS实现文本渐变效果的方法在网页设计中，为了让页面达到更好的视觉效果，我们经常会运用一些渐变效果来美化文本。而CSS是实现这一目的的强大工具之一。下面，我们将介绍一些使用CSS实现文本渐变效果的方法，并提供对应的具体代码示例。使用线性渐变使用CSS的线性渐变（linear gradien…

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

CSS 超链接属性解析：text-decoration 和 color

CSS 超链接属性解析：text-decoration 和 color 超链接是网页中常用的元素之一，它能够在不同页面之间建立连接。为了使超链接在页面中有明显的标识和吸引力，CSS 提供了一些属性来调整超链接的样式。本文将重点介绍 text-decoration 和 color 这两个与超链接相关的…

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

如何使用纯CSS实现类似悬浮窗口的效果

如何使用纯CSS实现类似悬浮窗口的效果悬浮窗口是在网页设计中经常使用的一种效果，它可以提供快速访问功能或者展示重要的信息。本文将介绍如何使用纯CSS来实现类似悬浮窗口的效果，包括具体的代码示例。首先，我们需要在HTML中创建一个容器元素，用于承载悬浮窗口的内容。可以是一个div或者其他合适的元素…

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

CSS3的新特性一览：如何使用CSS3实现文字效果

CSS3的新特性一览：如何使用CSS3实现文字效果在现代网页设计中，文字的呈现不仅仅局限于传统的排版，更加强调设计创意与用户体验的结合。CSS3作为前端开发人员的得力工具，提供了许多新特性来实现丰富多样的文字效果，使得网页设计更加生动有趣。本文将介绍CSS3的一些新特性，并给出实现文字效果的示例。…

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

CSS3属性如何实现网页中的图标布局？

CSS3属性如何实现网页中的图标布局？随着网页设计的日益复杂和多样化，图标在网页设计中的使用变得越来越频繁。而CSS3提供了许多新的属性和功能，使得实现网页中的图标布局更加便捷和灵活。本文将介绍一些常用的CSS3属性，以及如何利用它们来实现网页中的图标布局。一、字体图标字体图标是一种由字形组成…

程序猿
2025年12月24日
0000
看看这些前端面试题，带你搞定高频知识点（一）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。面试官：给定一个元素，如何实现水平垂直居中？…

程序猿
2025年12月24日 • 好文分享
3000
看看这些前端面试题，带你搞定高频知识点（二）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。面试官：页面导入样式时，使用 link 和 …

程序猿
2025年12月24日 • 好文分享
2000
看看这些前端面试题，带你搞定高频知识点（三）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。面试官：清除浮动有哪些方式？我：呃~，浮动…

程序猿
2025年12月24日 • 好文分享
0000
看看这些前端面试题，带你搞定高频知识点（四）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。面试官：请你谈一下自适应(适配)的方案我：…

程序猿
2025年12月24日 • 好文分享
0000
看看这些前端面试题，带你搞定高频知识点（五）

每天10道题，100天后，搞定所有前端面试的高频知识点，加油！！！，在看文章的同时，希望不要直接看答案，先思考一下自己会不会，如果会，自己的答案是什么？想过之后再与答案比对，是不是会更好一点，当然如果你有比我更好的答案，欢迎评论区留言，一起探讨技术之美。面试官：css 如何实现左侧固定 300px…

程序猿
2025年12月24日 • 好文分享
0000
HTML+CSS+JS实现雪花飘扬（代码分享）

使用html+css+js如何实现下雪特效？下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例，希望对大家有所帮助。很多南方的小伙伴可能没怎么见过或者从来没见过下雪，今天我给大家带来一个小Demo，模拟了下雪场景，首先让我们看一下运行效果可以点击看看在线运行：http://hai…

程序猿
2025年12月24日 • 好文分享
5000
分享20个首页流行布局样式，总有一款适合你！

本篇文章给大家分享20个首页流行布局样式，总有一款适合你，快来收藏试试吧，希望对大家有所帮助！有时我们会在网站上遇到一些内容布局问题，如文字对齐、图片设计与内容和谐、为文章选择合适的字体……在今天的文章中，介绍一些设计精美的创意布局，let‘s 开始。代号 001 源码…

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