position: sticky 在 th 上不生效，根本原因是 sticky 触发依赖滚动上下文，而 table 父容器或祖先的 overflow: hidden/auto、transform 会截断行为，且 th 缺少 top: 0、background-color、z-index 或列宽不一致（如未设 table-layout: fixed 和显式 width）导致错位或透出。
用 position: sticky 是目前最轻量、兼容性好且语义正确的方案，前提是结构和样式配合得当；其他方式（如 display: block 拆分 thead/tbody）虽可行，但易错位、损可访问性，不推荐作为首选。
为什么 position: sticky 在 th 上不生效？
常见现象是表头滚动时“一闪而过”或完全不动。根本原因不是属性写错了，而是 sticky 的触发依赖滚动上下文和祖先限制：
-
table父容器或更外层元素设置了overflow: hidden、overflow: auto或transform，会创建新的层叠上下文并阻断 sticky 行为 -
thead不是直接子元素——比如被div包裹，或表格嵌套在 flex/grid 容器里但未设overflow-y: auto -
th没有显式设置top: 0，或父级thead被设了display: table-header-group（默认值），但某些旧版 Safari 对该 display 值下的 sticky 支持不稳定 - 没给
th设background-color，滚动时内容从下方透出，误以为“没固定”
table-layout: fixed 和列宽一致性怎么配？
表头和内容列错位，90% 出在这里。浏览器默认按内容自动计算列宽，thead 固定后，tbody 滚动时列宽可能动态变化，导致对不齐：
- 必须给
table设table-layout: fixed - 所有
th和对应列的td要有明确宽度：要么统一用width: 120px，要么用百分比（如width: 20%）且总和为 100% - 避免只给
th设宽而忽略td，否则tbody渲染时仍按内容撑开 - 如果列数多、需横向滚动，外层容器要加
overflow-x: auto，并考虑scrollbar-gutter: stable both预留滚动条空间，防止右侧列被遮挡
同时固定表头和首列怎么写？
固定左上角交叉单元格是难点，关键在 z-index 层级和定位方向的组合：
立即学习“前端免费学习笔记（深入）”；
- 给
th:first-child和td:first-child同时设position: sticky、left: 0、z-index: 2 -
thead th设top: 0、z-index: 1（不能 ≤ 2，否则会被首列盖住） - 确保所有
th和td的white-space: nowrap+overflow: hidden，否则长文本会撑开列宽破坏对齐 - 不要给
table设border-collapse: collapse，它会干扰 sticky 元素的边框渲染；改用border-spacing: 0控制间距
真正麻烦的不是写几行 CSS，而是检查每一层祖先是否悄悄加了 overflow 或 transform；还有那些没显式设宽的 td，它们会在滚动中“偷偷变胖”，让表头瞬间错位。动手前先打开 DevTools，把鼠标悬停在 th 上看 computed 样式里 position 是否真生效，比猜半天更省时间。
