position: sticky 在原生 table 元素上完全失效，因 W3C 规范禁止其在 display: table/table-row/table-cell 上生效；替代方案是用 div + grid/flex 模拟表格并添加 sticky，或用 JS 监听滚动实现固定表头。
sticky 在 table 内部完全失效，根本原因是 display: table 的限制
CSS position: sticky 在 <table>、<tr>、<td> 等原生表格元素上默认不工作——这不是浏览器 bug，而是规范明确禁止的。W3C 规定：当元素的 display 值为 table、table-row、table-cell 等时，sticky 会被忽略，直接退化为 static。
所以哪怕你写了 position: sticky; top: 0;，在 <th> 或 <td> 上也毫无反应。这不是 overflow 没设对，是压根没进入 sticky 生效路径。
替代方案：用 div 模拟表格布局 + sticky 才真正可控
想让表头/列固定，必须放弃原生 <table> 结构，改用 display: grid 或 display: flex + 语义化 div 模拟。这样既能保持可访问性（配 role="table" 等），又能自由使用 sticky。
- 外层容器设
overflow-y: auto，高度固定（如max-height: 400px） - 表头行用
<div role="row">包裹，每个单元格用<div role="columnheader">，并加position: sticky; top: 0; background: white; z-index: 1; - 确保 sticky 元素的父容器没有
transform、filter、will-change等创建新层叠上下文的属性（否则 sticky 失效）
示例关键 CSS：
立即学习“前端免费学习笔记（深入）”；
.table-wrapper {
max-height: 400px;
overflow-y: auto;
}
.sticky-header {
position: sticky;
top: 0;
background: #fff;
z-index: 1;
}
如果非要用原生 table，只能靠 JS 滚动监听 + 动态定位
原生表格里无法用 sticky，但可以监听容器滚动，手动给 <th> 添加 position: fixed 并计算 left/top 偏移。缺点明显：
- 需要精确同步滚动位置和视口坐标（考虑表头宽度、横向滚动、缩放等）
- fixed 定位会脱离文档流，可能遮挡内容或破坏响应式对齐
- 移动端 touch 事件、惯性滚动、zoom 缩放都容易出错
- 无障碍支持弱（屏幕阅读器难识别“固定表头”语义）
简单判断逻辑：if (container.scrollTop > 0) { th.style.position = 'fixed'; }，但实际项目中建议用成熟库如 sticky-table-headers 或 floatThead，它们已处理边界 case。
检查 overflow 不是万能解，但确实是 sticky 生效前提之一
即使换成 div 表格，如果父容器没设 overflow-x/y，sticky 也可能不触发滚动粘性——因为 sticky 的“粘住”行为依赖于一个**有滚动能力的最近祖先容器**。这个容器必须满足：
- 有明确的高度限制（如
height或max-height） - 设置了
overflow: auto或overflow: scroll（overflow: hidden不行） - 该容器自身不能是
position: static且无 transform 等干扰属性
常见误操作：overflow: hidden 被当成“防溢出”加在 wrapper 上，结果 sticky 完全不动；或者只设了 overflow-x: auto 却期望 vertical sticky 生效。
最常被忽略的是：sticky 元素的“粘性范围”只限于其**包含块（containing block）的滚动区域**，而这个包含块往往不是你直觉认为的那个父 div，得一层层往上查 computed style 里的 overflow 和 position。用 Chrome DevTools 的 “Layout” 面板勾选 “Show scroll boundaries” 能快速定位哪个容器真正负责滚动。
