浏览器禁止对<tr>等表格元素设置非static定位，因其display为table-row，不支持sticky/relative/absolute；强行改display会破坏表格布局；正确方案是用div模拟表格或双层table+JS同步列宽。
为什么 <tr> 上写 position: sticky 或 position: relative 没反应
因为浏览器根本不允许对 <tr>、<tbody>、<table> 这类表格格式化上下文（table formatting context）元素设置 position 值——除了 static，其他都会被静默忽略。
这不是兼容性问题，而是规范行为：CSS 2.1 明确规定，表格相关元素的 display 类型（如 table-row）与非 static 定位不兼容。即使你在 DevTools 里看到样式面板写了 position: sticky，computed 值永远是 static。
-
<tr>的默认display是table-row，而table-row不支持sticky、relative、absolute - 给
<tr>加display: block强行覆盖？那它就不再是表格行了，<td>会错乱或塌缩，列宽对齐全崩 - Safari 尤其严格，Chrome 虽然对
<th>上的sticky有部分宽容，但<tr>一律无效
position: sticky 在表格中失效的真正瓶颈是滚动容器
就算你绕过 <tr>，把 sticky 写在 <th> 上，只要它的父链是 <tr> → <thead> → <table>，就注定失败。因为 <table> 不能作为 sticky 的“滚动容器”——它不产生块格式化上下文（BFC），也不响应 overflow 滚动机制。
- 浏览器查找 sticky 生效所需的“最近滚动祖先”时，遇到
<table>就停住并放弃，不会继续向上找 - 哪怕给
<table>加了overflow-y: auto，它依然无法触发 sticky，这是渲染引擎层面的限制 - 真正能当滚动容器的，必须是
display: block（或flex、grid）+ 有明确高度 +overflow可滚动的普通块级元素
想让表头固定，别碰原生 <table> 的 <tr>
硬改 <tr> 的 position 是条死路。可行路径只有一条：用语义清晰、CSS 可控的替代结构，把 sticky 放在浏览器认可的上下文中。
立即学习“前端免费学习笔记（深入）”；
- 用
div模拟表格：外层div设display: table，表头行用div+display: table-row，再包一层div.sticky-wrapper并设position: sticky; top: 0 - 整个数据区必须包裹在带
max-height和overflow-y: auto的容器里，且该容器不能是table或inline类型 - 如果必须保留
<table>标签（比如 CMS 输出不可控），只能用双层 table 法：一个只放<thead>的<table>（固定定位），另一个放<tbody>的<table>（放在滚动容器内），再用 JS 同步列宽
检查 position: sticky 是否真生效，别只看 CSS 规则
即使脱离了表格，sticky 仍可能因父级干扰而失效。以下四点必须同时满足，缺一不可：
- 元素自身有
position: sticky和至少一个偏移值（如top: 0） - 它的直接父容器有显式高度（
height、max-height或min-height），不能靠内容撑开 - 父容器的
overflow不能是hidden或auto（它们会截断 sticky 锚定链），优先用overflow: clip或确保它本身可滚动 - 父容器
display不能是table-row、inline、float，且不能有transform或will-change（这些会创建新层叠上下文，破坏 sticky 行为）
最容易被忽略的是父容器高度和 overflow 组合——很多开发者加了 sticky 却忘了给父级设 max-height，结果滚动区域根本不存在，sticky 自然没东西可“粘”。
