position: sticky 在原生表格元素（如 <thead>）上失效，因表格渲染模型与 sticky 定位上下文冲突；可靠方案是改用 div 模拟表格结构，将表头抽离为独立容器并设 position: sticky; top: 0; z-index: 10; background: white，且其父容器须有固定高度和 overflow-y: auto。
在 HTML 编辑器（如 CodePen、JSFiddle、StackBlitz 或 VS Code Live Server）中，position: sticky 对表格表头（<thead> 或 <th>）直接生效的概率极低——不是你写错了，而是浏览器根本没把它当“可粘”对象处理。
为什么 <thead> + position: sticky 在编辑器里大概率失效
原生表格元素（<table>、<tr>、<thead>）的渲染模型与 sticky 的定位上下文机制天然冲突：<table> 的 display: table 不构成定位上下文，导致 sticky 元素找不到“最近的定位祖先”作为滚动锚点；编辑器默认渲染容器（如 <div id="preview">）又往往没设高度和溢出，进一步切断 sticky 触发条件。
- Chrome 99+ 仅对
<th>和<td>支持top: 0，但<tr>和<thead>仍被忽略 - Firefox 至今（2026 年）不支持任何表格单元格的 sticky 行为
- 编辑器预览区若用
display: flex包裹<table>且未显式设height，sticky 会直接退化为static - 检查 computed styles 时若发现
position变成static，说明浏览器已主动降级，不是 CSS 写漏了
可靠方案：用 div 模拟表格结构并手动同步列宽
放弃原生 <table>，改用 display: block 或 display: grid 构建“视觉表格”，再对表头容器应用 sticky。这是唯一能在所有编辑器中稳定运行的路径。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 表头必须抽离为独立
<div class="thead-sticky">，不能嵌套在滚动容器内部 -
.thead-sticky必须有position: sticky; top: 0; z-index: 10; background: white;（缺一不可） - 滚动区域必须是
.thead-sticky的**同级兄弟元素**，且其父容器要设max-height和overflow-y: auto - 列宽必须硬编码（如
style="width: 150px"）或用 JS 同步——CSStable-layout: fixed在div布局中无效
在线编辑器中容易忽略的三个硬性条件
即使结构改成 div 模拟，以下三点任一缺失都会让 sticky 彻底静默：
立即学习“前端免费学习笔记（深入）”；
- sticky 元素的**直接父容器**必须同时满足：
max-height: 400px（或其他固定值）+overflow-y: auto—— 不能只写overflow: auto，也不能靠外层body滚动 - 父容器不能有
overflow: hidden、transform、will-change或filter，这些会创建新的层叠上下文并截断 sticky 锚定链 - 编辑器沙箱环境（如某些 iframe 预览）可能禁用 sticky，此时需确认是否启用了
sandbox="allow-scripts allow-same-origin"
真正卡住人的从来不是怎么写 position: sticky，而是谁该当它的父容器、谁该当它的兄弟容器、以及列宽怎么跟内容对齐——这三个点没对齐，再标准的 CSS 也吸不住。
