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

2024-01-26 00:15| 来源: 网络整理| 查看: 265

一、实现效果

在这里插入图片描述

二、主要的2个属性 table-layout : fixed position : sticky 1、table-layout

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

auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值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> 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; }*/ 个人素养社群素养职业素养身体素质艺术修养心理素质道德修为爱国与责任意识法律与环保意识基本职业素质企业文化与创新精神姓名基本身体情况体育特长能力艺术审美爱好特长心理健康自我调节自信自强、诚实守信文明素养、个人行为规范爱国意识责任心及服务意识法律意识环保意识语言表达能力及口语特长自我管理，自我激励发展规划能力信息技术能力沟通能力团队合作能力企业文化学习创新能力、解决问题能力优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀优秀

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

【本文地址】

公司简介

联系我们