移动端粘性表头失效主因是父容器拦截滚动上下文，需设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> 没设 <code>max-height 或 overflow-y: auto（仅靠 body 滚动不行，必须是表格容器自己可滚动）
• 父级用了 transform: translateZ(0) 或 will-change: transform（iOS Safari 尤其反感）
• <table> 外层包裹了 <code>flex 或 grid 容器，且该容器设置了 align-items: stretch（旧版 Safari 会忽略 top 偏移）
• <thead> 被加了 <code>display: block（破坏表格语义，sticky 在 th 上直接失效）

  移动端必须写的样式组合

  只写 position: sticky; top: 0 不够，移动端需显式控制布局边界和层叠：

  • <table> 必须设 <code>table-layout: fixed，否则列宽随内容撑开，sticky 锚点计算失准
  • th 和 td 需统一设 white-space: nowrap + overflow: hidden，防文字换行导致高度突变
  • th 必须加 background-color（透明背景在滚动时易闪白）和 z-index: 10（低于 10 可能被后续行遮盖）
  • 外层容器要设 max-height: 70vh（不能用 100vh，Safari 移动端地址栏缩放会触发重排）

  示例关键代码：

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载

  .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> 有 <code>min-width 防止水平压缩
  • z-index 必须比表头更高（例如 z-index: 11），否则会被 thead 盖住

  真正麻烦的从来不是怎么写，而是不同 iOS 版本对同一段 CSS 的解释差异——上线前务必在真机上测 iOS 15、16、17 三个系统版本。