必须同时满足四个硬性条件：外层容器设overflow-x: auto且有明确宽度；table设table-layout: fixed和width: 100%；thead th加position: sticky; top: 0; z-index: 2; background-color: white；tbody td:first-child与thead th:first-child均加position: sticky; left: 0; z-index: 1; background-color: white，左上角单元格还需叠加top: 0; left: 0; z-index: 3。
能，但必须同时满足四个硬性条件——否则你会看到首列一闪而过、首行跳动、左上角被盖住，或者干脆完全没反应。
为什么直接写 position: sticky 就不生效
不是浏览器不支持，而是 sticky 的定位逻辑依赖滚动上下文和稳定布局基准。表格默认的渲染模型会让它“找不到锚点”。
-
table父容器没设overflow-x: auto，sticky根本没触发条件 -
table-layout: auto（默认值）导致列宽浮动，left: 0每次重排都偏移 - 只给
thead th加了top: 0，但漏掉tbody td:first-child的left: 0 -
z-index没写，或写在非定位元素上（比如只设z-index却忘了position: sticky）
必须写的四条 CSS 规则
以下样式缺一不可，且顺序和层级要严格匹配：
- 外层容器设
overflow-x: auto且有明确宽度（不能靠内容撑开） -
table必须设table-layout: fixed和width: 100%；推荐用<col>定义列宽，比在th上写width更可靠 -
thead th加position: sticky; top: 0; z-index: 2; background-color: white; -
tbody td:first-child和thead th:first-child分别加position: sticky; left: 0; z-index: 1; background-color: white;；左上角单元格（thead th:first-child）必须叠加top: 0; left: 0; z-index: 3;，否则会被右侧或下方sticky元素覆盖
响应式场景下容易忽略的细节
响应式不是加个 max-width 就完事——关键在于滚动容器与表格尺寸的联动关系。
立即学习“前端免费学习笔记（深入）”；
- 容器宽度不能设
100vw或100%后又让内部table自由撑开；必须显式控制容器宽度（如min-width: 600px）并配合overflow-x: auto - 移动端竖屏时，
left: 0可能被系统状态栏或 Safari 地址栏遮挡，建议加padding-left: 1px避免渲染抖动 -
white-space: nowrap要谨慎加在td/th上——它会阻止换行，但也可能撑爆容器；更稳妥的是对长文本用text-overflow: ellipsis+overflow: hidden - Firefox 和旧版 Safari 对
sticky在table内部的支持仍不稳定，若需兼容 iOS 15 以下，得 fallback 到 JS 方案（如克隆表头/首列 + 同步滚动）
最常被跳过的其实是 table-layout: fixed 和 z-index 层级组合——这两处一错，整个冻结就变成“看起来像动了，其实没锁住”。
