用position: sticky固定表头是最简方案，需为<th>设top: 0、背景色和z-index，并包裹在max-height+overflow-y: auto的容器中。
表格头部固定：用 thead + CSS position: sticky 最简方案
纯 HTML 表格本身不支持滚动时固定表头，必须靠 CSS 配合。现代浏览器（Chrome 56+、Firefox 59+、Safari 14.1+）支持 thead > tr > th 设置 position: sticky; top: 0;，这是最轻量、无需 JS 的做法。
关键点：
-
thead必须显式存在，且th要有背景色（否则 sticky 后文字可能被下方内容遮盖） - 父容器需设
max-height和overflow-y: auto，否则无法触发滚动 - 避免给
table设border-collapse: collapse同时又用border在th/td上——容易导致 sticky 区域错位
<style>
.scrollable-table {
max-height: 300px;
overflow-y: auto;
}
.scrollable-table thead th {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
border-bottom: 2px solid #333;
}
</style>
<table class="scrollable-table">
<thead>
<tr><th>姓名</th><th>城市</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>北京</td><td>28</td></tr>
<!-- 更多行... -->
</tbody>
</table>表格尾部固定：CSS position: sticky + bottom: 0 的限制与绕过
tfoot 支持 position: sticky; bottom: 0;，但仅在表格整体高度超出容器、且 tfoot 位于可视区底部时才生效——实际中几乎不可靠。多数场景下，tfoot 会随滚动“消失”或卡在中间。
更可行的做法是把尾部数据抽出来，用独立 DOM 模拟：
立即学习“前端免费学习笔记（深入）”；
- 将汇总行（如“合计：¥12,450”）从
tfoot移出，放在table外部下方，并设position: sticky; bottom: 0; - 确保该元素父容器与 table 共享同一滚动上下文（即同属一个
max-height + overflow-y: auto容器） - 注意
z-index要高于tbody内容，否则会被遮挡
<div class="scroll-wrapper">
<table>...</table>
<div class="table-footer-sticky">合计：¥12,450</div>
</div>
<p><style>
.scroll-wrapper {
max-height: 300px;
overflow-y: auto;
}
.table-footer-sticky {
position: sticky;
bottom: 0;
background: #f9f9f9;
padding: 8px 12px;
font-weight: bold;
border-top: 1px solid #ddd;
z-index: 10;
}</style>IE 或旧版 Safari 不支持 sticky？用 position: absolute + JS 监听滚动是唯一出路
当目标环境含 IE11 或 Safari sticky 彻底失效。此时必须用 JS 计算表头/尾部位置并动态设置 position: absolute 和 top/bottom 值。
核心逻辑简单，但极易出错：
- 监听容器
scroll事件，而非window—— 因为滚动发生在内部容器上 - 每次滚动都要重算表头的
offsetTop和容器scrollTop，判断是否到达临界点 - 绝对定位后，需手动同步表头列宽到原
th，否则列对不齐（可用getBoundingClientRect()读宽，再设th.style.width） - 避免高频触发重排：用
requestAnimationFrame节流
示例片段（非完整）：
const container = document.querySelector('.scroll-wrapper');
const headerRow = document.querySelector('thead tr');
container.addEventListener('scroll', () => {
requestAnimationFrame(() => {
const { top } = headerRow.getBoundingClientRect();
const isStuck = top <= container.offsetTop;
headerRow.style.position = isStuck ? 'absolute' : 'static';
headerRow.style.top = isStuck ? `${container.offsetTop}px` : 'auto';
});
});为什么不用 display: block 拆分表头/表体？性能和语义都伤不起
有人尝试把 thead 和 tbody 分成两个独立 div，各自设 display: block，再强行对齐列宽。这看似绕过 sticky 限制，实则埋雷：
- 屏幕阅读器无法识别其为语义化表格，无障碍支持归零
- 列宽不同步：哪怕用 JS 同步，窗口缩放、字体加载延迟都会导致瞬间错位
- 打印样式彻底失效 —— 浏览器打印时不会渲染
position: sticky或absolute，但会按原表格结构输出；而拆分后两块内容在打印页里完全脱节 - 移动端横屏时，列数多的表格极易溢出，
table-layout: fixed又会让文字截断
真要兼容老环境，宁可上轻量 JS 方案，也别碰 display 拆分。
真正难的不是让头尾“看起来固定”，而是让它们在滚动、缩放、打印、读屏时都保持正确。大部分翻车，都出在只测了 Chrome 滚动，没碰 Safari 打印预览或 NVDA 朗读。
