浏览器禁止对等表格元素设置非static定位，因其display为table-row，不支持sticky/relative/absolute；强行改display会破坏表格布局；正确方案是用div模拟表格或双层table+js同步列宽。

为什么 <tr> 上写 <code>position: sticky 或 position: relative 没反应

因为浏览器根本不允许对 <tr>、<code><tbody>、<code><table> 这类表格格式化上下文（table formatting context）元素设置 <code>position 值——除了 static，其他都会被静默忽略。

这不是兼容性问题，而是规范行为：CSS 2.1 明确规定，表格相关元素的 display 类型（如 table-row）与非 static 定位不兼容。即使你在 DevTools 里看到样式面板写了 position: sticky，computed 值永远是 static。

• <tr> 的默认 <code>display 是 table-row，而 table-row 不支持 sticky、relative、absolute
• 给 <tr> 加 <code>display: block 强行覆盖？那它就不再是表格行了，<td> 会错乱或塌缩，列宽对齐全崩 <li>Safari 尤其严格，Chrome 虽然对 <code><th> 上的 <code>sticky 有部分宽容，但 <tr> 一律无效 <h3> <code>position: sticky 在表格中失效的真正瓶颈是滚动容器

就算你绕过 <tr>，把 <code>sticky 写在 <th> 上，只要它的父链是 <code><tr> → <thead> → <table>，就注定失败。因为 <code><table> 不能作为 sticky 的“滚动容器”——它不产生块格式化上下文（BFC），也不响应 <code>overflow 滚动机制。

• 浏览器查找 sticky 生效所需的“最近滚动祖先”时，遇到 <table> 就停住并放弃，不会继续向上找 <li>哪怕给 <code><table> 加了 <code>overflow-y: auto，它依然无法触发 sticky，这是渲染引擎层面的限制
• 真正能当滚动容器的，必须是 display: block（或 flex、grid）+ 有明确高度 + overflow 可滚动的普通块级元素

想让表头固定，别碰原生 <table> 的 <code><tr><p>硬改 <code><tr> 的 <code>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 法：一个只放 <code><thead> 的 <code><table>（固定定位），另一个放 <code><tbody> 的 <code><table>（放在滚动容器内），再用 JS 同步列宽 <h3>检查 <code>position: sticky 是否真生效，别只看 CSS 规则

即使脱离了表格，sticky 仍可能因父级干扰而失效。以下四点必须同时满足，缺一不可：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 元素自身有 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 自然没东西可“粘”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！