sticky 在表格中不生效是因为表格单元格（td/th）默认 display: table-cell，不满足 sticky 定位所需的块级上下文；解决方案是将 thead/tbody 设为 display: block、tr 设为 display: flex，并确保父容器有高度和滚动。
在使用 CSS 的
position: sticky
时，如果发现它在表格元素（如
或
）中不起作用，通常是因为表格内部的
特性导致的。表格单元格默认的渲染方式会限制 sticky 定位的生效。
为什么 sticky 在表格中不生效？
浏览器对表格元素（,,,等）有特殊的 display 行为：
表格行（
）表现为
单元格（
/
）是
CSS 中规定：sticky 定位需要元素处于一个具有块级上下文的容器中，而 table-cell 不满足该条件
因此，直接对
或
设置
很可能无效。
解决方案：改变 display 类型
为了让 sticky 生效，可以将表格部分结构改用或等支持 sticky 的显示模式：
把
和
设置为
将
改为
并设置固定宽度
确保父容器有明确的高度或滚动区域
示例代码：
这样表头就能在 tbody 滚动时固定在顶部。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
替代方案：使用非 table 标签模拟表格
若兼容性和结构灵活性更重要，可考虑用+ Flexbox 实现类似表格的布局：
用
模拟
、
、
配合
和
更易控制样式和行为
基本上就这些。关键在于理解 sticky 对父级 display 的依赖，调整结构让 sticky 能正常工作。
thtddisplaytabletheadtrtdtrdisplay: table-rowtdthdisplay: table-cellthtrposition: stickydisplay: blockflextheadtbodydisplay: blocktrdisplay: flex
姓名
年龄
张三
25
李四
30
divdivtablerowcelldisplay: flexposition: sticky