HTML 表格滚动锁定表头，实现固定行列

已于 2022-04-01 18:33:25 修改
阅读量1.3w 收藏 76
点赞数 18
分类专栏： Web前端 文章标签： html锁定表头 html表格固定行列
于 2022-04-01 18:12:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25775675/article/details/123904529
版权
本文介绍如何使用CSS的table-layout:fixed和position:sticky属性实现表格在滚动时保持头部固定。通过实例演示了如何创建一个高度可滚动的表格，其表头在水平和垂直方向上都固定显示。
摘要由CSDN通过智能技术生成

一、实现效果

在这里插入图片描述

二、主要的2个属性

table-layout : fixed  
position : sticky

1、table-layout

table-layout属性有两种特定值：

  1. auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值
  2. fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义

为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。

table {
	table-layout: fixed;
	width: 100%;
}

2、Position

大家对position 的作用应该不陌生，而固定表格则需要使用到 position : sticky 的设定

sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置

要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！

thead tr th {
	position:sticky;
	top:0;
}

三、案例代码

这个案例主要实现了表格在横向滚动或者纵向滚动时可以锁定表格的头部。

主要 css 代码在 style 标签下，还有就是表格外层的div也设置了绝对布局，这样可以将内部表格的高度设置为100%，否则就需要设置一个固定高度。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }

        .sticky-table {
            overflow: auto;
            height: 100%; /* 设置固定高度 */
            width: 100%;
            position: absolute
        }

        .sticky-table td, .sticky-table th {
            /* 设置td,th宽度高度 */
            border: 1px solid #c7d8ee;
            width: 150px;
            min-width: 150px;
            height: 30px;
            padding: 5px;
        }

        .sticky-table th {
            position: sticky;
            top: 0; /* 首行永远固定在头部  */
            background-color: #eaf4ff; /*设置表头背景色*/
        }

        .sticky-table td:first-child, .sticky-table th:first-child {
            position: sticky;
            left: 0; /* 首列永远固定在左侧 */
            z-index: 1;
            background-color: #eaf4ff;
        }

        .sticky-table th:first-child {
            z-index: 2; /*表头的首列要在上面*/
        }

        .sticky-table th > div {
            width: 100%;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
        }

        /*.sticky-table table {
            table-layout: fixed;
        }*/

    </style>
</head>
<body style="padding: 0px;margin: 0px;">
<div class="sticky-table">
    <table>
        <thead>
        <tr>
            <th></th>
            <th colspan="8">个人素养</th>
            <th colspan="4">社群素养</th>
            <th colspan="8">职业素养</th>
        </tr>
        <tr>
            <th></th>
            <th colspan="2">身体素质</th>
            <th colspan="2">艺术修养</th>
            <th colspan="2">心理素质</th>
            <th colspan="2">道德修为</th>
            <th colspan="2">爱国与责任意识</th>
            <th colspan="2">法律与环保意识</th>
            <th colspan="6">基本职业素质</th>
            <th colspan="2">企业文化与创新精神</th>
        </tr>
        <tr>
            <th>姓名</th>
            <th>
                <div>基本身体情况</div>
            </th>
            <th>
                <div>体育特长能力</div>
            </th>
            <th>
                <div>艺术审美</div>
            </th>
            <th>
                <div>爱好特长</div>
            </th>
            <th>
                <div>心理健康</div>
            </th>
            <th>
                <div>自我调节</div>
            </th>
            <th>
                <div>自信自强、诚实守信</div>
            </th>
            <th>
                <div>文明素养、个人行为规范</div>
            </th>
            <th>
                <div>爱国意识</div>
            </th>
            <th>
                <div>责任心及服务意识</div>
            </th>
            <th>
                <div>法律意识</div>
            </th>
            <th>
                <div>环保意识</div>
            </th>
            <th>
                <div>语言表达能力及口语特长</div>
            </th>
            <th>
                <div>自我管理，自我激励</div>
            </th>
            <th>
                <div>发展规划能力</div>
            </th>
            <th>
                <div>信息技术能力</div>
            </th>
            <th>
                <div>沟通能力</div>
            </th>
            <th>
                <div>团队合作能力</div>
            </th>
            <th>
                <div>企业文化学习</div>
            </th>
            <th>
                <div>创新能力、解决问题能力</div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

参考：https://www.cnblogs.com/tiandi/p/13883306.html

菜鸟小窝
关注
专栏目录
table表身滑动，表头不动样式
qq_36939013的博客
09-27 1006
.toolTipx{ display: flex; flex-direction: column; background: #fff; color: #6c6c6c; max-height: 300px; width: 300px; .head-box { width: 300px; padding-right: 5px; background: #dee0ee; } .toolTip-title { color: #32c5ff;
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5_html表格表头固定不滚动内容滚动.rar
07-10
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将表格内容与表头很好的对应，便于阅读表格内容。
在HTML中固定表格表头的简单方法
最新发布
yivifu的专栏
08-13 447
表文介绍了一种不使用JavaScrip也不用第三方插件简单实现在HTML页面中固定表头滚动表格的效果。
html锁定表头冻结行列兼容多浏览器
07-13
html 锁定表头 冻结行列 兼容 多浏览器 仿excel 测试兼容ie8, 火狐firefox, chrome
html table 固定表头和列
09-21
html table 固定表头和列，下载后，运行index.html页面即可看到效果。
HTML table表头固定
普罗旺斯
09-27 1401
【代码】HTML table表头固定。
HTML table表头固定（自己做项目使用的几种方法）
热门推荐
多毛大叔爱萝莉的博客
07-02 7万+
还记得之前公司需要做表头固定，但是由于基础太差，去查了好多好多文档。最后总结出几个不错的方法和插件。 一、使用css + js来实现表头固定 使用css定位th 根据父级滚动条scrolltop的偏移量获取值，在用js把偏移量赋值到th的定位top上。就做到了表头固定。（此方法需要固定高度） 项目demo css样式部分 主要是出现滚动条和定位th还有固定高度。 &amp;amp;amp;amp;amp;amp;l...
HTML CSS 表格固定表头、和指定字段，实现表格内部滚动条
04-27
HTML CSS 表格固定表头、和指定字段，实现表格内部滚动条
html表头固定 表体滚动
06-22
html表头固定 表体滚动,代码简单，通俗易懂
html 表头固定及列固定
10-29
对网页中表格进行列及行的固定 有多重样式可充选择
html表头固定
12-01
js实现表头固定，
HTML+JS实现固定表头和锁定左列的Demo（兼容IE，火狐，谷歌等大众浏览器）
03-28
在这个特定的Demo中，开发者使用了这两种技术来实现一个功能，即在表格中固定表头和锁定左列，以便于用户在滚动查看长表格内容时，表头始终保持可见，左侧列也保持固定。这个功能对于数据密集型的网页应用尤其有用，...
利用js+css+html实现固定table的列头不动
11-26
这个实现的关键在于，当表格内容滚动时，`#scroll_head` 作为浮动的表头出现，保持在视口顶部，提供持续的列名参考。这种技术尤其适用于大数据量的表格，防止用户在滚动时迷失列的对应关系。 总结来说，实现固定...
html 固定表头和左侧列,纯css实现固定表头和锁定列
weixin_39884872的博客
06-01 1268
table表格是一个网站很常用的元素，用以展示大量的数据。在处理表格时，通常会加入许多功能，如斑马线、选中高亮、固定表头、锁定列等等，本篇文章主要介绍如何单纯的使用css实现固定行或列的功能。一般做法大部分的网上介绍的实现方式，甚至部分ui框架如iview等都是通过三至四个表格组合，然后js处理同步滚动来实现，这样的好处是容易实现，pc端也不会出现什么问题。但是在手机端时，会有严重的不同步滚动现象...
HTML页面table表格固定行和列
01-04
为了解决这个问题，我们可以实现HTML表格的固定表头和固定左侧列，确保用户在滚动时始终能看到关键信息。 固定表头通常是通过CSS定位技术来实现的。我们可以创建一个包含表头的新`<div>`，并将其设置为绝对定位，使...
html使table表头不动,html怎么实现表头不动
weixin_26882891的博客
06-18 4653
html实现表头不动的方法：首先将内容要滚动的区域控制在tbody标签中，并添加“overflow-y: auto;”样式；然后给tr标签添加“table-layout:fixed;”即可固定表头。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。HTML table表格 固定表头 tbody加滚动条纯CSS table表格 thead固定 tbod...
HTML table标签实现表头固定
2301_78416672的博客
05-11 374
表头表头表头表头表头内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容。
vue element表格表头固定 内容上下滚动
10-01
要在Vue Element表格中实现固定表头和内容上下滚动，可以利用Element UI提供的表格组件的特性和样式进行操作。 首先，需要在表格组件外部包裹一个具有固定高度的容器，并设置其样式为`overflow: auto;`，这样就可以实现内容的上下滚动。 然后，在表格组件中，设置`height`属性为需要固定的高度，并将`max-height`属性设为`none`，这样表格内容就可以根据容器的高度自动调整，并实现垂直滚动。 接下来，为表格头部的`el-table-column`组件设置`fixed`属性为`true`，这样表头就会固定在容器的顶部。 此外，可以对滚动容器的样式进行个性化设置，例如添加边框、背景颜色等，以满足具体项目的需求。 最后，在使用Element UI的表格组件时，还需要根据实际数据的情况进行横向或纵向的滚动设置，以确保表格可以正常显示和滚动。 总结来说，实现Vue Element表格表头固定和内容上下滚动的方法是，在表格组件外部包裹一个固定高度的容器，并设置容器的样式为`overflow: auto;`，在表格组件中设置固定高度和表头`fixed`属性，最后根据需要对滚动容器的样式进行个性化设置。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值