可使用四种方法实现表格表头固定：一、CSS sticky定位；二、分离表头表体+绝对定位；三、CSS Grid+伪元素占位；四、JavaScript动态计算偏移量。
如果您希望在网页中展示长表格时保持表头始终可见，当用户滚动表格内容区域时表头不随内容移动，则需要借助CSS定位技术实现表头固定效果。以下是几种可行的实现方法：
一、使用position: sticky实现表头固定
该方法利用CSS的sticky定位特性，使中的在滚动到视口顶部时自动“粘住”，无需JavaScript干预，兼容现代主流浏览器。
1、为
设置border-collapse: collapse，并确保和
结构完整。
2、为内的添加样式：position: sticky; top: 0; background-color: white; z-index: 10;立即学习“前端免费学习笔记（深入）”；
3、确保父容器具有明确的高度限制或启用垂直滚动，例如设置max-height: 400px; overflow-y: auto;于
外部包裹的上。
4、为避免表头文字被遮挡，需为
设置padding和font-weight: bold;，并统一border样式以维持视觉连贯性。
二、分离表头与表体并用绝对定位模拟固定
该方法将与
|
拆分为两个独立的元素，通过外层容器控制滚动区域，使表头脱离文档流并保持位置不变。
1、将原始表格拆分为两个部分：一个仅含的table（用于显示固定表头），另一个仅含
的table（用于滚动内容）。
2、用
包裹两个table，设置其position: relative;和max-height: 400px; overflow-y: auto;
3、为表头table设置position: absolute; top: 0; left: 0; width: 100%; z-index: 2;
4、为内容table设置margin-top: 表头高度值（如42px），确保内容从表头下方开始渲染。
抠抠图
免费在线AI智能批量抠图，AI图片编辑，智能印花提取。
下载
三、使用CSS Grid配合伪元素占位实现表头锁定
该方法通过Grid布局定义行轨道，将表头置于固定行轨道中，再利用伪元素维持列宽对齐，适用于列宽已知或可预设的场景。
1、将
