Sticky定位在表格元素中失效，因<table>、<tbody>、<tr>等不支持sticky，浏览器直接忽略；正确做法是用div模拟表格并设sticky，或采用双层table、CSS Grid、第三方库等替代方案。
Sticky 定位在表格（<table>）中失效，根本原因是 position: sticky 在 <table>、<tbody>、<tr> 等表格相关元素上**不被支持**——浏览器会直接忽略 sticky 声明，无论是否设置了 top 或 z-index。
确保滚动容器不是 table 本身
表格元素（<table>）不能作为 sticky 的“滚动容器”（即最近的具有滚动机制的祖先），它本身也不支持 sticky 定位。若你把 position: sticky 写在 <th> 或 <td> 上却无效，大概率是因为：父级是 <tr> → 祖先是 <tbody> → 最终容器是 <table>，而这一整条链都不触发 sticky 行为。
- ✅ 正确做法：把 sticky 元素（如表头
<th>）包裹进一个 普通块级容器（如<div class="sticky-wrapper">），再让这个<div>成为滚动区域的直接子元素； - ❌ 错误写法：
<table><thead><tr><th style="position:sticky;top:0">姓名</th></tr></thead></table>—— 浏览器无视该sticky； - ⚠️ 注意：即使给
<table>加了overflow-y: auto，它依然不能成为 sticky 的有效容器，因为表格布局不参与 CSS 定位上下文的常规计算。
用 div 模拟表格结构实现 sticky 表头
当需要固定表头且支持滚动时，推荐放弃原生 <table>，改用语义化更灵活、CSS 控制更强的 <div> 布局：
- 用
display: table / table-row / table-cell模拟表格外观； - 将表头行（
display: table-row）放在一个独立的<div class="table-header">中，并设position: sticky; top: 0; z-index: 10;； - 整个数据区域用
<div class="table-body" style="max-height: 400px; overflow-y: auto;">包裹，确保它有明确的高度和滚动能力； - 这样 sticky 就能正常工作，且兼容所有现代浏览器。
若必须用原生 table，可考虑替代方案
原生表格对 sticky 不友好，但仍有可行补救方式：
立即学习“前端免费学习笔记（深入）”；
-
双层 table 法：一个只放表头的
<table>（固定定位或 sticky），另一个放数据的<table>（带overflow-y: auto容器），通过 JS 同步列宽； -
CSS grid 模拟：用
grid-template-columns对齐列，position: sticky在<header>或<div>上天然生效； -
第三方库辅助：如
sticky-table-headers（轻量 JS）或datatables.net（含内置 sticky 支持），避免手动处理兼容性问题。
检查 sticky 生效的必要条件
即使脱离了 table，sticky 仍可能失效。请确认以下几点都满足：
- 元素本身设置了
position: sticky和至少一个偏移属性（如top: 0）； - 其**最近的滚动祖先容器**（非
<table>）必须有明确的overflow-x/y/auto且高度/宽度受限； - 该祖先不能是
display: table、inline、contents等不产生块格式化上下文的值； - 没有父级设置了
transform、filter、will-change等创建新层叠上下文并阻断 sticky 的属性（除非你主动需要隔离）。
