thead本身无视觉固定能力，其核心价值在于提供语义化结构前提：position: sticky需依赖thead默认的display: table-row-group来构建合法滚动上下文，否则或直接置于下会被浏览器静默忽略；同时thead明确划分表头与数据边界，是所有CSS或JS固定方案的结构基础。

thead 标签本身不提供任何视觉固定能力，它只是语义容器。真正让表头“固定”的，是配合 position: sticky 的 CSS 行为，而 thead 是这个行为的必要结构前提。

---

position: sticky 为什么必须依赖 thead？

position: sticky 要生效，目标元素必须：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 是块级或表格行级元素（<th> 在 <code><tr> 内天然满足）<li>其父级不能是 <code>display: table-row-group 以外的 display 类型（<thead> 默认就是该类型）<li>滚动容器需有明确边界（比如设了 <code>max-height + overflow-y: auto）

如果直接给 <tr> 或 <code><th> 加 <code>sticky，但没包在 <thead> 里，多数浏览器会静默忽略——因为 <code><tr> 父级是 <code><table>，而 <code><table> 的 display 值（<code>table）不构成 sticky 的滚动上下文。

所以不是 thead “做了什么”，而是它提供了 sticky 能识别的、符合规范的 DOM 层级路径。

立即学习“前端免费学习笔记（深入）”；

---

tbody 必须设 display: block 吗？

不一定，但绝大多数场景下必须显式干预，否则无法滚动：

• 默认 <tbody> 是 <code>display: table-row-group，它不会产生滚动条
• 如果只给 <tbody> 设 <code>max-height 和 overflow-y: auto，但不改 display，滚动行为无效（内容溢出但不可滚动）
• 改成 display: block 后，<tr> 会变成普通块级子元素，失去表格对齐逻辑 → 必须同步给 <code><tr> 和 <code><td> 加 <code>display: table-row / table-cell 才能保持列对齐

  更稳妥的做法是：

  • 不动 <tbody> 的 display，默认保留表格流<li>把整个 <code><table> 包进一个带 <code>max-height 和 overflow-y: auto 的容器中
  • 只给 <thead> th 加 <code>position: sticky; top: 0

    这样既保表格语义，又避免 display 混乱。

    ---

    IE11 及以下不支持 sticky 怎么办？

    没有 polyfill 能完美模拟 position: sticky 在表格中的行为。务实方案只有两个：

    • 用 JavaScript 监听 scroll，动态计算 thead 的 top 值并设为 position: absolute，但需同步处理：
      • 表格宽度变化时重算定位
      • 页面缩放时重算
      • th 宽度可能因内容撑开，需手动同步到 clone 的 header
    • 更轻量的降级：把 <thead> 提出来，单独做一个 <code><table> 放在上面，下面接一个纯 <code><tbody> 的 <code><table>，用 JS 绑定列宽（监听第一行 <code><td> 的 <code>offsetWidth，然后 setAttribute width 到对应 <th>）<p>后者兼容性好、无滚动抖动，但列宽同步代码要防重复执行，且 <code>resize 事件需节流。

      ---

      thead 的价值不在样式，而在约束结构——它让浏览器知道“这部分是标题，别跟数据混在一起渲染”。所有固定技巧都建立在这个判断之上。漏掉 thead，后续无论加多少 CSS 或 JS，都只是在补救结构缺陷。