移动端粘性表头失效主因是父容器拦截滚动上下文，需设max-height+overflow-y:auto、禁用transform/will-change、table-layout:fixed及th加background/z-index；iOS 15.4前存在抖动，可用backface-visibility:hidden缓解或transform+scroll监听降级。
移动端粘性表头用 position: sticky 是可行的，但 Safari（尤其是 iOS 15.4 之前）和部分 Android WebView 会抖动、错位甚至完全失效——不是写法错了，是渲染引擎没跟上。
为什么 thead th 加了 position: sticky 和 top: 0 还不粘？
最常见原因是父容器“拦住了”滚动上下文。移动端浏览器对 position: sticky 的触发更敏感，稍有干扰就退化成 position: relative：
- 外层
<div>没设max-height或overflow-y: auto（仅靠 body 滚动不行，必须是表格容器自己可滚动） - 父级用了
transform: translateZ(0)或will-change: transform（iOS Safari 尤其反感） -
<table>外层包裹了flex或grid容器，且该容器设置了align-items: stretch（旧版 Safari 会忽略top偏移） -
<thead>被加了display: block（破坏表格语义，sticky在th上直接失效）
移动端必须写的样式组合
只写 position: sticky; top: 0 不够，移动端需显式控制布局边界和层叠：
-
<table>必须设table-layout: fixed，否则列宽随内容撑开，sticky锚点计算失准 -
th和td需统一设white-space: nowrap+overflow: hidden，防文字换行导致高度突变 -
th必须加background-color（透明背景在滚动时易闪白）和z-index: 10（低于 10 可能被后续行遮盖） - 外层容器要设
max-height: 70vh（不能用100vh，Safari 移动端地址栏缩放会触发重排）
示例关键代码：
立即学习“前端免费学习笔记（深入）”；
.scrollable-table {
max-height: 70vh;
overflow-y: auto;
}
.table-fixed {
table-layout: fixed;
width: 100%;
}
.table-fixed thead th {
position: sticky;
top: 0;
background: #fff;
z-index: 10;
white-space: nowrap;
overflow: hidden;
}
兼容性兜底：iOS Safari 抖动怎么办？
iOS Safari 15.4 之前存在吸附延迟、滚动跳变问题，不是 bug 是渲染限制。临时缓解方案：
- 给
th加backface-visibility: hidden（强制 GPU 加速，多数情况能压平抖动） - 避免在
th内使用box-shadow或border-radius（这些会触发重绘，放大抖动） - 如果表格列数多、内容长，改用
transform: translateY()+scroll事件监听模拟（仅当真无法忍受抖动时才上）
注意：IE 全系列完全不支持 position: sticky，但移动端基本不用考虑。
首列也想固定？别同时设 top 和 left
Chrome/Edge 120+ 和 Safari 16.4+ 支持双轴 sticky（top: 0; left: 0 同时生效），但 iOS 15.x 及更早版本只认一个方向。实际做法是：
- 优先保
top: 0（表头比首列更重要） - 若必须固定首列，单独为第一列单元格加
position: sticky; left: 0，并确保<table>有min-width防止水平压缩 -
z-index必须比表头更高（例如z-index: 11），否则会被thead盖住
真正麻烦的从来不是怎么写，而是不同 iOS 版本对同一段 CSS 的解释差异——上线前务必在真机上测 iOS 15、16、17 三个系统版本。
