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并设置固定宽度 - 确保父容器有明确的高度或滚动区域
示例代码：
<table style="width: 100%;">
<thead style="display: block;">
<tr style="display: flex; background: #f0f0f0;">
<th style="flex: 1; position: sticky; top: 0;">姓名</th>
<th style="flex: 1; position: sticky; top: 0;">年龄</th>
</tr>
</thead>
<tbody style="display: block; height: 200px; overflow-y: auto;">
<tr style="display: flex;">
<td style="flex: 1;">张三</td>
<td style="flex: 1;">25</td>
</tr>
<tr style="display: flex;">
<td style="flex: 1;">李四</td>
<td style="flex: 1;">30</td>
</tr>
</tbody>
</table>
这样表头就能在 tbody 滚动时固定在顶部。
立即学习“前端免费学习笔记（深入）”；
替代方案：使用非 table 标签模拟表格
若兼容性和结构灵活性更重要，可考虑用div + Flexbox 实现类似表格的布局：
- 用
div模拟table、row、cell - 配合
display: flex和position: sticky - 更易控制样式和行为
基本上就这些。关键在于理解 sticky 对父级 display 的依赖，调整结构让 sticky 能正常工作。
