直接用 position: sticky 同时固定首行和首列可行，但必须满足四个硬性条件：外层容器需有明确宽高并设 overflow-x/y:auto、table-layout: fixed 且列宽用 定义、首行首列样式分层设置 z-index 和 background-color、避免祖先元素使用 transform/filter/will-change。
直接用 position: sticky 同时固定首行和首列是可行的，但必须满足四个硬性条件——缺一就会出现“首列一闪而过”“表头被盖住”“滚动错位”等现象，不是浏览器兼容问题，而是 sticky 的定位机制本身要求严格。
外层容器必须有横向 + 纵向滚动上下文
sticky 不会自己“创造”滚动，它只响应祖先容器的滚动行为。表格本身不能直接设 overflow（会破坏表格渲染），所以必须套一层容器：
- 容器需同时设
overflow-x: auto和overflow-y: auto，或至少overflow: auto - 容器必须有明确宽高约束（如
max-width: 800px; max-height: 400px），不能靠内容撑开 - 避免在该容器或其任意祖先上使用
transform、filter、will-change，否则会切断 sticky 的滚动感知链
table-layout: fixed 是强制前提，不是可选项
默认的 table-layout: auto 会让列宽随内容动态计算，导致 left: 0 锚点漂移——滚动时首列会跳动甚至消失。
- 必须显式写
table { table-layout: fixed; width: 100%; } - 列宽优先用
<col>标签定义，比在<th> 上写 <code>width更稳定：<col style="width: 120px"> <col style="width: 200px"> - 如果列数多且宽度不确定，
minmax(120px, 1fr)只适用于display: grid，原生<table> 中无效 <h3>首行、首列、左上角单元格的样式必须分层写死</h3> <p>三者共用 <code>position: sticky，但偏移量和层级不能混用，否则视觉撕裂不可避免：-
thead th：加top: 0; z-index: 2; background-color: white; -
tbody td:first-child, tbody th:first-child：加left: 0; z-index: 1; background-color: white; -
thead th:first-child：必须**叠加**写top: 0; left: 0; z-index: 3;，否则会被右侧th或下方td盖住左边 -
background-color不可省略——没有背景色，滚动时右侧内容会从下方透出
移动端和旧浏览器兜底方案不能靠 polyfill
iOS Safari 15.4+、Chrome 56+、Firefox 59+ 支持双向 sticky，但 iOS 14 及更早版本、部分 Android WebView 仍会失效。此时 JS 降级是唯一可靠路径：
- 监听容器的
scroll事件，注意加{ passive: false }（iOS Safari 默认禁用非 passive 滚动监听） - 用
getBoundingClientRect()获取首列实际位置，再通过transform: translateX(${x}px)动态偏移 - 首列需设
position: absolute，父<table> 设 <code>position: relative - 必须手动处理
resize、焦点切换、打印样式等边界场景——这些细节常被忽略，但上线后立刻暴露
真正卡住人的从来不是“怎么写”，而是“为什么写了不生效”——
table-layout: fixed没设、z-index没分层、background-color漏掉、祖先元素用了transform，任何一个都足以让整个方案失效。生产环境里，建议把这四条检查项写成 CSS linter 规则，而不是靠人眼排查。 -
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
