position: sticky 加了没反应的根本原因是缺失生效前提：必须设置 top 等偏移值，且依赖最近的 overflow-y: auto/scroll 祖先容器提供滚动上下文，同时避免 overflow: hidden、transform 等截断行为。

position: sticky 是现代浏览器中实现固定表头最轻量、语义最干净的方案，但它的生效有明确前提——不是加了就起作用。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

为什么 position: sticky 加了没反应？

常见现象是滚动时表头照样跟着跑，或者只在顶部闪一下就消失。根本原因在于 sticky 不是独立生效的定位，它依赖“滚动上下文”和“层叠环境”：

• top 值（如 top: 0）是相对于最近一个设置了 overflow-y: auto 或 scroll 的祖先容器计算的，不是相对于 viewport
• 如果任意上层父元素设置了 overflow: hidden、overflow: clip 或 transform，就会截断 sticky 行为
• <thead> 本身不能直接设 <code>max-height 或 overflow，必须由其父级（比如 <table> 外层 <code><div> 或 <code><tbody>）提供滚动边界 <li>没设 <code>z-index 时，滚动内容可能盖住表头；没设 background-color 时，底色透出导致文字看不清

<thead> 和 <code><th> 该给谁加 <code>sticky？

两种写法都可行，但行为差异明显：

• 给 <thead> 加：<code>position: sticky; top: 0; → 整行表头一起固定，适合单行表头，代码简洁
• 给每个 <th> 加：<code>position: sticky; top: 0; → 更灵活，支持多行表头（比如合并单元格后的分组标题），也便于后续扩展固定列（加 left: 0）
• 不推荐给 <tr> 加 <code>sticky：部分浏览器对表格行级元素的 sticky 支持不稳定，且容易破坏表格渲染逻辑
• 无论哪种，都要确保 <tbody> 所在容器有 <code>max-height + overflow-y: auto，否则没有滚动，sticky 就没触发机会

  IE11 及更老浏览器怎么降级？

  IE 完全不支持 position: sticky，强行用会彻底失效。务实做法不是 polyfill，而是结构降级：

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

  • 把 <thead> 提到表格外部，变成一个独立的 <code><table>（仅含表头），下面接一个带 <code>overflow-y: auto 的 <div> 包裹另一个只含 <code><tbody> 的 <code><table> <li>用 <code>table-layout: fixed + 显式设置每列 width（如 <col width="120">），保证两个表格列宽严格一致
  • 避免 JS 动态监听 scroll 来重定位表头：性能差、易抖动、滚动条宽度变化会导致错位，除非你真需要像素级同步
  • 如果项目已用 ag-Grid 或 handsontable 这类库，直接启用它们内置的 headerHeight / fixedColumns 配置，比手写稳定得多

  真正难的不是让表头“看起来固定”，而是让列宽在各种缩放、字体加载、动态插入行等场景下始终对齐。这点上，table-layout: fixed + <col> 是比任何 JS 计算都可靠的底线保障。