直接给设position: sticky无效，因display: table-header-group不支持sticky；必须作用于每个，且需同时满足：外层容器设max-height+overflow-y: auto、加top: 0/background-color/z-index≥10、表格设table-layout: fixed并显式定义列宽。

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）时：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 给 <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>