position: sticky 是当前最可行、最轻量的表头吸顶方案，但需满足三个硬性前提：父容器须设 max-height + overflow-y: auto；th 直接父元素不能有 transform/overflow:hidden 等截断样式；th 必须显式设置 background-color 和 z-index。

直接说结论：position: sticky 是当前最可行、最轻量的方案，但不是写上 top: 0 就能用——它对 DOM 结构、父容器样式和单元格自身属性都有硬性要求。

为什么 position: sticky 表头不生效？

常见现象是：滚动时表头一闪而过、被内容遮盖、或完全没反应。根本原因不是浏览器 bug，而是没满足三个前提：

• <table> 或其任意祖先容器必须设置 <code>max-height + overflow-y: auto（不能是 hidden 或 visible）
• <th> 的直接父元素（通常是 <code><tr>）不能有 <code>overflow: hidden、transform、will-change 等会截断粘性行为的样式
• <th> 必须显式声明 <code>background-color 和 z-index（哪怕只是 z-index: 1），否则滚动时文字会被下方 <td> 盖住或透出底色 <h3>如何正确写 <code>position: sticky 表头样式？

  推荐最小可用配置，避免引入多余干扰：

  

  Pptx To Html

  使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

  下载

  #table-container {
    max-height: 400px;
    overflow-y: auto;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  thead th {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
    padding: 12px 8px;
    border-bottom: 2px solid #e0e0e0;
  }

  注意：thead 不要套在 <div> 里；<code><th> 不能是空标签；如果用了 <code>colspan 或 rowspan，确保 <thead> 内结构完整且无错行。 <h3>IE11 及以下浏览器怎么办？</h3> <p><code>position: sticky 在 IE11 及更早版本中完全不支持，降级方案只能靠分离 DOM + JS 同步列宽：

  • 把 <thead> 单独抽成一个 <code><div>，样式设为 <code>position: relative + 固定高度
  • 原表格只留 <tbody>，设为 <code>overflow-y: auto
  • 用 JS 监听 scroll 和 resize，手动同步两者的列宽（读取 getBoundingClientRect() 或 offsetWidth）
  • 不要依赖 jQuery 的 .width()，它在 IE 中返回值不稳定；优先用原生 clientWidth 或 offsetWidth

  固定多列（如首两列）要注意什么？

  可以同时固定表头和左侧列，但 left 值必须严格对应列宽总和，且 z-index 要分层：

  • 第一列：position: sticky; left: 0; z-index: 3;
  • 第二列：position: sticky; left: 120px; z-index: 2;（假设第一列宽 120px）
  • 表头本身：position: sticky; top: 0; z-index: 4;（必须高于所有列）
  • 所有 sticky 元素的 background-color 都得显式设置，否则重叠区域会透底

  实际开发中，列宽一旦动态变化（比如字体缩放、内容换行），left 值就得重新计算——这点容易被忽略，导致固定列错位。