最轻量可靠的固定表头方案是直接给 thead 设置 position: sticky; top: 0;，前提是语义完整的 table（含 thead 和 tbody）、thead 为 table 直接子元素、外层容器设 max-height 和 overflow-y: auto，且避免 display: block 破坏表格布局。
直接给 thead 加 position: sticky 就行
不用改结构、不写 JS、不设 display: block——这是目前最轻量也最可靠的方案。前提是表格语义完整（即包含 thead 和 tbody），且父容器有明确高度限制。
-
thead必须是<table>的直接子元素，不能嵌套在其他 div 里 - 给
thead th或thead tr设置position: sticky; top: 0;，不是给table或tbody - 必须确保父容器（比如一个
<div>）有固定高度或最大高度，并启用overflow-y: auto；否则滚动无从触发 - 避免对
table设置display: block：它会破坏列宽对齐、边框合并，导致右侧多出一条边框或列错位
tbody 滚动失效？检查这三点
常见现象是加了 overflow-y: auto 却没反应——因为 tbody 本身不支持 overflow，它不是块级容器，而是表格内部盒模型的一部分。
- 别试图直接给
tbody设height和overflow，CSS 会忽略 - 真正起作用的是包裹
table的外层<div>：它需要max-height+overflow-y: auto - 如果用了
table-layout: fixed，务必配合width和colgroup或显式th/td width，否则列宽会塌缩或错乱
移动端 Safari 和旧版 Chrome 的兼容性坑
position: sticky 在 iOS Safari ≤ 14.4 和 Android Chrome ≤ 56 中不支持 thead 内部元素的粘性定位——tr 或 th 不会固定，整个表头随内容一起滚走。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 最低安全版本：iOS ≥ 14.5，Chrome ≥ 57，Firefox ≥ 59
- 若需兼容更老系统，得降级方案：把
thead单独抽成一个<div>，和tbody并列，再用 JS 同步scrollLeft（但本文聚焦纯 CSS） - 测试时别只看桌面 Chrome：真机连上 Safari DevTools，用「Responsive Design Mode」模拟 iOS 设备再验证
表头和数据列对不齐？大概率是宽度没控住
固定表头后，常出现表头文字偏右、列与列之间缝隙变大——本质是浏览器对表格自动布局（table-layout: auto）的列宽计算被滚动打断。
立即学习“前端免费学习笔记（深入）”；
- 强制启用
table-layout: fixed，并给table设width: 100% - 用
<colgroup>显式定义每列宽度，比在th上设width更稳定 - 避免
th内使用white-space: nowrap+ 超长文本：它会撑开整列，导致后续列挤压变形 - 如果用了
padding-right补偿滚动条宽度，注意不同系统滚动条宽度不同（macOS 隐藏式 vs Windows 常驻式）
thead tr { position: sticky; top: 0; } 和外层容器的 max-height + overflow-y: auto。其余全是围绕这两点防崩的细节——列宽、兼容性、滚动触发条件，漏掉任意一个都可能让第一行“看着固定，实则失效”。 
