position: sticky 是实现表头固定的最简单可靠方案，需为 th 设置 top: 0，父容器 thead 不可裁剪，table 必须置于 max-height + overflow-y: auto 的 div 内，避免直接设 table 溢出或遗漏背景色。
用 position: sticky 实现表头固定最简单可靠
现代浏览器（Chrome 56+、Firefox 59+、Safari 10.1+）原生支持 position: sticky，它是实现表格表头固定滚动的首选方案，无需 JS、不破坏语义、兼容响应式布局。
关键点在于：必须给 <th> 设置 top: 0，且其父容器（<thead>）不能有 overflow 裁剪，同时整个 <table> 需在可滚动的容器内（如设了 max-height 和 overflow-y: auto 的 <div>）。
常见错误：
- 直接给
<table>设overflow—— 表头会随内容一起滚动，因为sticky的“容器”是最近的具有滚动机制的祖先，而<table>自身不是块级滚动上下文 - 忘了给
<th>加background-color—— 滚动时文字可能被下方行遮挡 - 在
<thead>上加display: block或强行拆分 DOM —— 破坏表格语义和可访问性，屏幕阅读器可能无法正确读出表头关联
<div style="max-height: 300px; overflow-y: auto;">
<table style="width: 100%; border-collapse: collapse;">
<thead>
<tr>
<th style="position: sticky; top: 0; background: #fff; z-index: 1; padding: 8px; border: 1px solid #ccc;">姓名</th>
<th style="position: sticky; top: 0; background: #fff; z-index: 1; padding: 8px; border: 1px solid #ccc;">年龄</th>
<th style="position: sticky; top: 0; background: #fff; z-index: 1; padding: 8px; border: 1px solid #ccc;">城市</th>
</tr>
</thead>
<tbody>
<tr><td>张三</td><td>28</td><td>北京</td></tr>
<tr><td>李四</td><td>32</td><td>上海</td></tr>
<!-- 更多行... -->
</tbody>
</table>
</div>IE 或旧版 Safari 需要降级方案：分离 <thead> 和 <tbody> 容器
IE 完全不支持 position: sticky，旧版 Safari（<thead> 提到外层固定，<tbody> 单独包裹进滚动容器，并手动同步列宽。
立即学习“前端免费学习笔记（深入）”；
难点不在代码本身，而在列宽对齐 —— <th> 和 <td> 必须严格等宽，否则视觉错位。推荐用 JS 动态读取 <th> 宽度并设为 <td> 的 min-width，或用 table-layout: fixed + 显式 width 百分比控制。
注意：
- 不能只靠 CSS 的
width: 33%—— 内容撑开后列宽会漂移 - 如果表格有
resize或动态列显示/隐藏，必须重新同步宽度 - 使用
aria-describedby或scope属性补全可访问性，否则屏幕阅读器可能丢失表头关联
用 transform: translateY() 模拟 sticky 是陷阱
有人尝试监听 scroll 事件，用 transform: translateY() 把 <thead> “提上来”，这看似可控，实则问题密集：
- 滚动抖动明显：JS 计算 + 重排重绘，尤其在低端设备上帧率骤降
- 与原生滚动不同步：手指滑动时
scroll事件滞后，表头会“追着滚”甚至卡顿 - 无法响应
scroll-behavior: smooth或键盘方向键滚动 - 需要额外处理
resize、zoom、横向滚动等边界情况
除非业务强依赖 IE8–10 且拒绝 polyfill，否则不建议走这条路。
移动端 iOS Safari 的 sticky 偶发失效怎么办
iOS Safari（尤其是 15.x 早期版本）在某些组合下（如 <table> 在 position: relative 容器中、或父级有 transform）会让 sticky 失效。临时解法很具体：
- 确保
<table>的任意祖先元素都不含transform、perspective、filter等创建新层叠上下文的属性 - 给
<th>加will-change: transform（仅 iOS Safari，其他浏览器忽略） - 避免在
<thead>上设置border-collapse: collapse—— 改用border-spacing: 0和显式border
真正麻烦的是混合了 input 聚焦、软键盘弹出、页面缩放的场景 —— 这时 sticky 可能被 Safari 强制重置，目前无完美方案，只能降级为 JS 同步列宽 + 固定定位模拟。
表头固定的本质矛盾在于：HTML 表格是单一流式结构，而“固定表头”要求它具备两个独立滚动层。所有方案都是在妥协 —— 或靠浏览器原生能力偷懒，或靠 JS 拼精度。选哪个，取决于你愿意为兼容性付出多少维护成本。
