小屏幕下 position: sticky 首列失效主因是 iOS Safari 对滚动祖先判定严格：需满足四个硬性条件——.table-container 设 overflow-x: auto 与明确 width；table 设 table-layout: fixed；首列 th/td 均加 position: sticky; left: 0；各 sticky 单元格设 background-color 和 z-index。
为什么小屏幕下 position: sticky 首列经常失效
不是 CSS 写错了，而是移动端浏览器（尤其是 iOS Safari）对 position: sticky 的滚动祖先判定更严格：如果外层容器没设明确宽度、或 table-layout 未固定、或存在 white-space: nowrap 导致表格撑出视口，sticky 就会静默降级为 relative —— 看不到报错，但就是不粘。
小屏幕冻结首列必须加的四个硬性条件
-
.table-container必须设overflow-x: auto且有明确width（不能只写100%，建议用min-width: fit-content或具体像素值） -
table必须设table-layout: fixed，否则列宽随内容浮动，left: 0会偏移 - 首列所有单元格（
thead th:first-child+tbody td:first-child）都要加position: sticky; left: 0;，缺一个就断层 - 每个 sticky 单元格必须带
background-color和分层z-index（比如表头首列z-index: 3，普通行首列z-index: 1），否则滚动时文字透出
移动端适配关键：避免横向滚动卡顿和缩放干扰
小屏幕下用户习惯双指缩放，而 overflow-x: auto 容器若没禁用缩放，sticky 行为会紊乱。需在 meta viewport 中锁定缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
同时建议给 table 加 max-width: 100vw，防止内容过宽触发强制横向滚动；首列宽度用 min-width 控制（如 min-width: 80px），避免文字挤压换行破坏 sticky 基准线。
真机调试时最常漏掉的三件事
- 忘了给
th和td同时设vertical-align: top，导致首列单元格高度不一致，sticky锚点错位 - 在
@media查询里覆盖了 sticky 样式（比如写了position: static），却没检查是否被更高优先级规则干掉 - 用
display: block强制改表格元素显示模式（如为了 flex 对齐），直接让sticky失效——sticky只对表格相关 display 值（table-cell、table-row）有效
小屏幕冻结首列真正难的不是写法，而是每一步都得在真机上验证：iOS Safari 的 sticky 表现和 Chrome DevTools 模拟器常常不一致，尤其在页面有其他滚动容器嵌套时，sticky 会悄悄找错祖先节点。
立即学习“前端免费学习笔记（深入）”；
