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

一、实现效果

二、主要的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 不会有任

HTML 表格滚动锁定表头,实现固定行列最先出现在Python成神之路

版权声明:
作者:倾城
链接:https://www.techfm.club/p/28482.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>