直接给<thead>设position: sticky无效，因display: table-header-group不支持sticky；必须作用于每个<th>，且需同时满足：外层容器设max-height+overflow-y: auto、<th>加top: 0/background-color/z-index≥10、表格设table-layout: fixed并显式定义列宽。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
position: sticky 是当前最可行的纯 CSS 方案，但只写 top: 0 不会生效——它依赖三个硬性条件同时满足，缺一不可。
为什么 <thead> 加 <code>position: sticky 没反应
浏览器根本不识别 <thead> 上的 <code>position: sticky，因为它的 display 是 table-header-group，不符合 sticky 元素必须是块级或行内级的要求。真正要设样式的是每个 <th>，且必须单独加：
<ul>
<li>
<code>position: sticky 和 top: 0
background-color（不能是 transparent 或未声明）z-index: 10（至少为 1，推荐 ≥10 避免被遮盖）<tbody> 怎么滚动才不破坏表格结构
<p><code><tbody> 本身不支持 <code>overflow-y，直接设会失效。正确做法是：不改 <tbody> 的 <code>display，而是给包裹 <table> 的外层 <code><div> 设滚动上下文：
<ul>
<li>外层容器必须有 <code>max-height + overflow-y: auto
<table> 保持默认 <code>display: table，不要设 display: block
transform、filter 或 will-change，否则阻断 sticky 定位参考表头和数据列对不齐怎么办
错位几乎全是列宽计算不一致导致的，尤其当内容长度差异大（比如短标签 vs 长 URL）时：
- 给
<table> 加 <code>table-layout: fixed - 所有
<th> 和 <code><td> 显式设宽度，例如 <code>th:nth-child(1) { width: 120px; } - 统一用
border-collapse: collapse，别在<th> 单独加 <code>border又在<table> 加 <code>border-collapse，容易偏移 - 给
<th> 加 <code>border-bottom，否则和第一行<td> 之间视觉断裂 <h3>IE11 或旧版 Safari 怎么办</h3> <p><code>position: sticky在 IE 全系完全不支持，Safari ≤13.1 也不稳定。降级方案不是硬塞 polyfill，而是结构级妥协：立即学习“前端免费学习笔记（深入）”；
- 检测支持性：
CSS.supports('position', 'sticky') - 不支持时，把
<thead> 提到表格外，用两个独立 <code><table>（一个只放表头，一个只放数据） <li>用 <code>table-layout: fixed+ 预设列宽同步两表，避免 JS 计算列宽带来的性能开销
真正卡住的点不在代码行数，而在滚动上下文是否成立、
<th> 是否有背景、列宽是否强制一致——这三个地方漏掉任何一个，表头就“动”不起来。</th> - 检测支持性：
