position: sticky 是唯一纯 CSS 实现首列+表头冻结的方案，但需满足滚动上下文、渲染层限制、table-layout: fixed、显式宽高、z-index 分层及背景色等硬性条件，否则在 iOS Safari 等移动端易失效。

position: sticky 是唯一能纯 CSS 实现首列 + 表头冻结的可行方案，但必须满足几个硬性条件，否则在 iOS Safari、安卓 WebView 或旧版 Chrome 上直接失效。

为什么 position: sticky 在移动端表格里容易失效

不是写上 top: 0 和 left: 0 就能用 —— 它依赖「滚动上下文」和「渲染层限制」：

• sticky 元素必须有可滚动的父容器，且该容器不能带 overflow: hidden、transform、filter 或 will-change，否则滚动上下文被截断
• table 元素本身不能设 overflow，所以必须用外层 <div class="table-container"> 包裹，并设 overflow-x: auto; overflow-y: auto;
• iOS Safari 对 left 的支持直到 15.4 才稳定，部分安卓 WebView（尤其 UC 内核）仍存在 left 抖动或卡顿
• border-collapse: collapse 会让 sticky 单元格的边框错位，必须改用 border-collapse: separate

table-layout: fixed 必须启用

不设这个，列宽由内容撑开，横向滚动时首列会缩进或错位，sticky 失去锚点：

• 给 <table> 加 table-layout: fixed; width: 100%;
• 所有 <th> 和 <td> 需显式设 min-width 或 width（百分比或固定值），否则首列可能被压缩到看不见
• 避免用 white-space: normal，首列建议加 white-space: nowrap; 防止换行破坏固定效果

z-index 分层和背景色是刚需

表头和首列同时 sticky 时，它们会相互遮挡，必须手动分层：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• thead th：设 position: sticky; top: 0; z-index: 3; background: white;
• tbody td:first-child：设 position: sticky; left: 0; z-index: 2; background: #f9f9f9;
• thead th:first-child（左上角交点）：z-index: 4，否则会被首列盖住
• 没设 background？滚动时底下的内容会透上来，视觉错乱

移动端滚动体验优化要点

原生 overflow 滚动在 iOS 上惯性弱、阻尼大，需针对性增强：

立即学习“前端免费学习笔记（深入）”；

• 外层容器加 -webkit-overflow-scrolling: touch;（仅 iOS 有效，对现代 Safari 已非必需但兼容老版本）
• 避免给容器设 height 固定值，改用 max-height + min-height 更适应不同屏幕
• 若表格行高不一致（如含多行文本），sticky 可能跳变 —— 统一用 line-height + min-height 控制行高
• 真机测试时重点看微信内置浏览器（X5 内核）、QQ 浏览器、小米/华为自带浏览器，它们对 sticky 支持参差不齐

真正麻烦的不是写几行 CSS，而是确认每一层祖先元素都没偷偷加 transform 或 clip —— 这种问题不会报错，只会让 sticky 彻底静默失效。