position: sticky对thead无效，因thead的display为table-header-group，不满足sticky要求；必须作用于th元素，并配合外层滚动容器、background-color、z-index及table-layout:fixed才能生效。
为什么加position: sticky没反应
根本不是浏览器不支持，而是 thead 本身不能响应 position: sticky——它的 display 是 table-header-group，不符合 sticky 元素必须是块级或行内级的规范。真正起作用的是 th（或 td），必须把样式写在单元格上。
常见错误现象：<thead style="position: sticky; top: 0"> 完全无效；<code><th> 加了 <code>top: 0 但滚动时仍跟着动；表头文字被下方内容透出或遮盖。
- 结构必须完整：
<thead><tr><th>姓名</th></tr></thead>，不能删 <tr> 或把 <code><th> 提到外面
<li>Firefox v90 及更早版本对 <code>th 上的 sticky 支持不稳定，v91+ 才推荐直接用
- iOS Safari 要额外加
transform: translateZ(0) 或给 th 设显式 width（如 width: 20%），否则 sticky 区域计算失败
父容器怎么设才能让sticky生效
position: sticky 不是“自己动”，它依赖最近的、有滚动能力的祖先容器提供上下文。只给 <table> 设 <code>max-height 和 overflow-y: auto 是没用的——表格元素本身不创建滚动上下文。
正确做法是用一个外层 <div> 包裹整个表格，并设滚动属性：
<pre class="brush:php;toolbar:false;"><div class="table-container" style="max-height: 400px; overflow-y: auto;">
<table>...</table>
</div></pre>
<ul>
<li>必须用 <code>overflow-y: auto（不能是 hidden、scroll 或 visible）
- 该容器及其任意祖先不能有
transform、filter 或 will-change，否则会截断 sticky 行为
- 如果表格嵌在
flex 或 grid 容器里，确认该容器未通过 align-items 或 overflow 干预子项定位
th上写sticky必须配哪三个样式
只写 position: sticky; top: 0 远远不够。缺一不可的三项是：background-color、z-index、滚动上下文（已在上一节说明）。这三者共同决定表头是否“看得见、压得住、不跑偏”。
-
background-color 必须是明确值（如 #fff、white），不能是 transparent 或未声明——否则滚动时 th 文字会被 td 内容透出
-
z-index 至少为 1，推荐 10 起步；尤其当表格在 Modal、Tooltip 等层叠环境中时，必须显式设值
- 建议加
border-bottom: 1px solid #ddd，否则表头和第一行数据之间容易视觉断裂
列宽错位怎么解决
滚动后 th 和 td 列宽不一致，是 fixed 表头最常被忽略的渲染问题。根源在于表格默认按内容自适应宽度，而 sticky 后的 th 和滚动中的 td 分属不同渲染阶段，宽度不同步。
- 强制启用固定布局：
table { table-layout: fixed; width: 100%; }
- 为每列的
th 和第一行 td 显式设相同宽度，例如：th:nth-child(1), td:nth-child(1) { width: 120px; }
- 避免混用单位（如 % + px + fr），统一用
px 或 ch 更可控
- 如果列宽动态变化（比如 URL 或长文本），就得用 JS 同步：
th.style.width = td.offsetWidth + "px"，并在 resize 和 scroll 时做节流更新
真正难的不是写那几行 sticky 样式，而是判断当前表格是否处于一个“能被 sticky 正确识别”的渲染上下文中——有时候删掉一行 overflow: hidden 或一个 transform，问题就消失了。
thead 本身不能响应 position: sticky——它的 display 是 table-header-group，不符合 sticky 元素必须是块级或行内级的规范。真正起作用的是 th（或 td），必须把样式写在单元格上。<thead style="position: sticky; top: 0"> 完全无效；<code><th> 加了 <code>top: 0 但滚动时仍跟着动；表头文字被下方内容透出或遮盖。
<thead><tr><th>姓名</th></tr></thead>，不能删 <tr> 或把 <code><th> 提到外面
<li>Firefox v90 及更早版本对 <code>th 上的 sticky 支持不稳定，v91+ 才推荐直接用transform: translateZ(0) 或给 th 设显式 width（如 width: 20%），否则 sticky 区域计算失败父容器怎么设才能让sticky生效
position: sticky 不是“自己动”，它依赖最近的、有滚动能力的祖先容器提供上下文。只给 <table> 设 <code>max-height 和 overflow-y: auto 是没用的——表格元素本身不创建滚动上下文。
正确做法是用一个外层 <div> 包裹整个表格，并设滚动属性：
<pre class="brush:php;toolbar:false;"><div class="table-container" style="max-height: 400px; overflow-y: auto;">
<table>...</table>
</div></pre>
<ul>
<li>必须用 <code>overflow-y: auto（不能是 hidden、scroll 或 visible）
transform、filter 或 will-change，否则会截断 sticky 行为flex 或 grid 容器里，确认该容器未通过 align-items 或 overflow 干预子项定位position: sticky; top: 0 远远不够。缺一不可的三项是：background-color、z-index、滚动上下文（已在上一节说明）。这三者共同决定表头是否“看得见、压得住、不跑偏”。
background-color 必须是明确值（如 #fff、white），不能是 transparent 或未声明——否则滚动时 th 文字会被 td 内容透出z-index 至少为 1，推荐 10 起步；尤其当表格在 Modal、Tooltip 等层叠环境中时，必须显式设值border-bottom: 1px solid #ddd，否则表头和第一行数据之间容易视觉断裂th 和 td 列宽不一致，是 fixed 表头最常被忽略的渲染问题。根源在于表格默认按内容自适应宽度，而 sticky 后的 th 和滚动中的 td 分属不同渲染阶段，宽度不同步。table { table-layout: fixed; width: 100%; }
th 和第一行 td 显式设相同宽度，例如：th:nth-child(1), td:nth-child(1) { width: 120px; }
px 或 ch 更可控th.style.width = td.offsetWidth + "px"，并在 resize 和 scroll 时做节流更新sticky 样式，而是判断当前表格是否处于一个“能被 sticky 正确识别”的渲染上下文中——有时候删掉一行 overflow: hidden 或一个 transform，问题就消失了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
