sticky 在表格中不生效是因为表格单元格（td/th）默认 display: table-cell，不满足 sticky 定位所需的块级上下文；解决方案是将 thead/tbody 设为 display: block、tr 设为 display: flex，并确保父容器有高度和滚动。
在使用 CSS 的 position: sticky 时，如果发现它在表格元素（如 th 或 td）中不起作用，通常是因为表格内部的 display 特性导致的。表格单元格默认的渲染方式会限制 sticky 定位的生效。
为什么 sticky 在表格中不生效？
浏览器对表格元素（table, thead, tr, td 等）有特殊的 display 行为：
- 表格行（
tr）表现为display: table-row - 单元格（
td/th）是display: table-cell - CSS 中规定：sticky 定位需要元素处于一个具有块级上下文的容器中，而 table-cell 不满足该条件
因此，直接对 th 或 tr 设置 position: sticky 很可能无效。
解决方案：改变 display 类型
为了让 sticky 生效，可以将表格部分结构改用display: block 或 flex 等支持 sticky 的显示模式：
- 把
thead和tbody设置为display: block - 将
tr改为display: flex并设置固定宽度 - 确保父容器有明确的高度或滚动区域
示例代码：
| 姓名 | 年龄 |
|---|---|
| 张三 | 25 |
| 李四 | 30 |
这样表头就能在 tbody 滚动时固定在顶部。
立即学习“前端免费学习笔记（深入）”；
替代方案：使用非 table 标签模拟表格
若兼容性和结构灵活性更重要，可考虑用div + Flexbox 实现类似表格的布局：
- 用
div模拟table、row、cell - 配合
display: flex和position: sticky - 更易控制样式和行为
基本上就这些。关键在于理解 sticky 对父级 display 的依赖，调整结构让 sticky 能正常工作。
