HTML表头固定，表体滚动方案

最新推荐文章于 2024-05-11 01:32:20 发布
最新推荐文章于 2024-05-11 01:32:20 发布
阅读量5.8k 收藏 9
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mate_ge/article/details/79175487
版权

在前端开发过程中，经常会遇到一个需求就是，需要一个表格展示数据，

1、表格头纵向位置固定，纵向滚动时，若表体内容超长时，表头不能移动，表体内容滚动显示；

2、表格头横向随表格内容横向滚动；

效果展示：


关键：

1、表头（意义上的）和表体（意义上的）都用一个table来显示；

2、因为表体可以纵向滚动，右边多出一个纵向滚动条，所以表体的宽度要比表头的宽度多出17个像素，也就是说，如果要设置表格的宽度是500的话，表体的宽度为100%，那表头的宽度就是减去17个像素，就是calc(100% - 17px)；

3、列宽要固定，两个table节点的table-layout样式为fixed

全部代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .table {
            border: solid 1px #ddd;
            width: 100%;
            display: inline-block;
        }

        th, td {
            border-right: solid #ddd 1px;
            border-bottom: solid #ddd 1px;
        }

        th {
            background-color: #ddd;
        }
    </style>
</head>
<body>

<div style="width: 500px">
    <div ref="table" class="table">
        <div style="width: calc(100% - 17px);overflow-x: hidden;" id="table-head">
            <table style="background-color: #fff;width: 100%;table-layout: fixed;">
                <thead>
                <tr>
                    <th style="width: 200px">姓名</th>
                    <th style="width: 200px">性别</th>
                    <th style="width: 200px">省份证号</th>
                    <th style="width: 200px">省份证号</th>
                    <th style="width: 200px">省份证号</th>
                </tr>
                </thead>
            </table>
        </div>
        <div style="width: 100%;overflow-x: scroll;height: 150px;overflow-y: scroll;" id="table-body">
            <table style="background-color: #fff;width: 100%;table-layout: fixed">
                <tbody>
                <tr>
                    <td style="width: 200px">张三开始</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                        <img src="//www.baidu.com/img/bd_logo1.png" style="height: 28px;width: auto">
                    </td>
                </tr>
                <tr>
                    <td style="width: 200px">张三1</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三2</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                <tr>
                    <td style="width: 200px">张三结束</td>
                    <td style="width: 200px">男</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                    <td style="width: 200px">xxxxxxxxxxxxxxxxxxx</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="../../../src/lib/jquery/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    var $tableHead = $('#table-head');
    var $tableBody = $('#table-body');
    /*设置同步横向滚动*/
    $tableBody.scroll(function (ev) {
        $tableHead.scrollLeft($tableBody.scrollLeft()); // 横向滚动条
    });

</script>
</body>
</html>


martsforever
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序实现顶部、底部滑动联动
03-29
这个场景一般用于展示数据时，数据过多，每条一行显示不下，表头可以横向滑动，下面要显示的数据部分横向纵向都可以滑动。表头或下面数据部分横向滑动的时候，两部分可以进行联动 具体效果像这样（随便写的丑样式布局） (此图片来源于网络，如有侵权，请联系删除! ) 说说原理，主要是使用两个scroll-view组件，然后监听两个scroll-view的滑动事件，然后根据滑动的scroll-view横向滑动的距离，通过scroll-left来设置另一个scroll-view滑动的距离 首先WXML代码：   <scroll-view style='width:100%;height:100rpx;borde
实现上下左右滑动的listview，表头联动（附带可以点击的效果）
qq_32900655的博客
03-06 686
找了一些可以实现左右，上下联动的，但需求是可以点击的，这个只能自己琢磨
HTML table标签实现表头固定
最新发布
2301_78416672的博客
05-11 247
表头表头表头表头表头内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
Android 自定义表格（第一行及第一列固定，其他列可滑动）
11-28 862
竖向滑动处理：第一列除第一个单元格外，是一个RecyclerView，表格内容为一个GridlayoutManager的RecyclerView。横向滑动处理：第一行（除第一个单元格）和表格内容，由一个横向的HorizonScrollView包含，因此横向滑动由HorizonScrollView控制。//如果ScrollTableView小于屏幕宽度，则按比例设置宽度，宽度占满屏幕。//如果ScrollTableView小于屏幕宽度，则按比例设置宽度，宽度占满屏幕。//设置画笔的描边宽度值。
html 实现一个表头固定、列表可滚动、宽度自适应、文字自动换行的table
weixin_44463883的博客
12-07 1183
html 实现一个表头固定、列表可滚动、宽度自适应、文字自动换行的table。
table固定表头
bluelotos893的博客
09-01 7360
设置table表头固定
解决layui表格的表头不滚动的问题
10-16
在网页开发中，Layui 是一款非常流行的前端框架，它提供了丰富的组件，包括...这种方法对于那些需要大量数据展示且需要保持表头固定的页面尤其适用。希望这个解决方案对你有所帮助，并鼓励你在实践中继续探索和优化。
BootStrap的table表头固定tbody滚动的实例代码
09-01
总结来说，这个实例为我们提供了一种实现Bootstrap表格固定表头滚动tbody的方法，这对于处理大量数据的表格是一个实用的解决方案。通过理解这个例子，我们可以更好地掌握Bootstrap的定制能力和JavaScript的动态调整...
html 表头固定及列固定
10-29
为了解决这个问题，我们可以使用CSS和其他技术实现“html 表头固定”和“列固定”，使用户在滚动浏览时始终能看到表头和特定列的内容。以下将详细介绍这两种方法。 ### 一、表头固定（Header Fixing） 表头固定的...
ASP.ENT GridView 表头固定 表身可以滚动
12-31
"ASP.NET GridView 表头固定 表身可以滚动"这个主题正是针对这一需求的解决方案。 首先，我们要理解实现表头固定的基本原理。在HTML和CSS中，我们可以使用`position: fixed`属性来使元素固定在浏览器的某个位置，...
css 固定表头 拖动滚动条时对应表头所对应的列 ie6测试通过
09-25
本篇将详细介绍如何使用CSS实现一个在滚动时保持固定的表头，同时确保在IE6下正常工作的方案。 首先，问题的核心在于，当表格内容过多导致出现滚动条时，滚动条滚动时表头无法与数据列保持对应。为了解决这个问题，...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： 标题一 标题二 标题三 标题标题标题标题标题标题标题标题标题四
HTML 表格滚动锁定表头，实现固定行列
dongfangxinding的博客
12-11 2641
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义。
HTML表格实现固定表头 内容滚动
乐逍遥
05-25 884
分成两个表格 就可以了 比如 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> table { border-color: #e4e4e4; bor...
Html标题随滚动条移动（标题栏始终保持在顶端）
wangscaler的博客
11-26 1万+
Lurke团队： HTML如何保持标题栏置顶上 1、标题栏置顶并固定 position:fixed; 定义和用法： position 属性规定元素的定位类型。 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。 可能的值 可能的值描述： absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “t......
html表头跟随滚动,table的表头固定--上下滚动表头固定，左右滚动跟随滚动
weixin_42506994的博客
06-07 2181
遇到这种固定表格的，我们一般都是写两个table，一个放thead，一个放tbody；如果表格内容少，我们只需要给两个table100%宽度就行，如果遇到表格内容很长的就比较棘手了；1.上面的table的父容器div样式：#fixedDiv {position: absolute;left: 0;right: 0;overflow: hidden;//这里hidden是用于隐藏滚动条}2.下面的...
HTML表头固定，内容滚动实现
Fuwj001的博客
07-10 2989
在前端开发过程中，经常会遇到一个需求就是，需要一个表格展示数据， 1、表头固定，内容过多的时候向下活动，表头不跟随移动，若表体内容超长时，表头不能移动，表体内容滚动显示； 2、表格头横向随表格内容横向滚动； 效果展示： 关键技术点： 1、表头（意义上的）和表体（意义上的）都用一个table来显示； 2、因为表体可以纵向滚动，右边多出一个纵向滚动条，所以表体的宽度要比表头的宽度多出17个像素，也就是说，如果要设置表格的宽度是500的话，表体的宽度为100%，那表头的宽度就是减去17个像素，
HTML table表格 固定表头 tbody加滚动条
热门推荐
沐枫
12-31 1万+
纯CSStable表格thead固定tbody滚动效果 由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！ 实现思路： 将内容要滚动的区域控制在 tbody 标签中添加 overflow-y:auto; 样式，给 tr 标签添加table-layout:fixed;...
bootstrap table 表头固定表体滚动
03-29
在 Bootstrap 中，可以使用固定表头和滚动表体的插件来实现这个效果。以下是实现步骤： 1. 引入必要的文件： ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> ``` 2. 创建一个表格，并在表格头部添加 `thead` 标签： ``` <table class="table table-bordered table-striped"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> ``` 3. 使用 JavaScript 初始化表格，并调用插件： ``` $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); ``` 其中，`fixedHeaderTable` 是插件名称，`fixedColumn: true` 表示需要固定表头。 4. 根据需要调整样式： ``` .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } ``` 其中，`.table-fixed-header` 是插件自动生成的类名，可以根据需要进行修改。 完整代码如下： ``` <!DOCTYPE html> <html> <head> <title>Bootstrap Table 表头固定表体滚动</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.3.1/css/bootstrap.min.css"> <style> .table-fixed-header { overflow-y: auto; max-height: 400px; } .table-fixed-header thead th, .table-fixed-header tbody td { width: 100px; min-width: 100px; max-width: 100px; } </style> </head> <body> <div class="container"> <table class="table table-bordered table-striped table-fixed-header"> <thead> <tr> <th>列头1</th> <th>列头2</th> <th>列头3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> <!-- more rows --> </tbody> </table> </div> <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/fixed-header-table@1.3.2/dist/fixed-header-table.min.js"></script> <script> $(function() { $('.table').fixedHeaderTable({ fixedColumn: true }); }); </script> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值