position: sticky 不生效主因是缺乏滚动上下文，需父容器设 max-height 与 overflow-y: auto、显式 background-color 和 z-index，且避开 transform 等干扰属性。

为什么直接写 position: sticky 没反应

不是 CSS 写错了，而是 position: sticky 本身不“主动生效”——它依赖滚动上下文和渲染环境。常见现象：表头跟着内容一起滚走、文字被下方 <td> 盖住、<code><thead> 加了样式却毫无反应。 <ul><li><code><thead> 不能直接设 <code>position: sticky，浏览器不把它当可定位元素；真正要加的是 <th>，且必须带 <code>top: 0

父容器没设 max-height 和 overflow-y: auto，sticky 就没触发条件，等于没写

<th> 没设 <code>background-color（哪怕只是 #fff），滚动时下方 <td> 的文字会透上来，看起来像“消失”或重叠 <li>祖先链里有 <code>transform、filter 或 will-change，会创建新层叠上下文，直接阻断 sticky 行为

th 上怎么写才真正生效

只写 position: sticky; top: 0 是不够的，三个条件缺一不可：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 必须包裹 <table> 的外层容器设 <code>max-height + overflow-y: auto（不能是 hidden 或 visible）
• <th> 必须显式声明 <code>background-color（transparent 不行，unset 也不行）
• <th> 必须设 <code>z-index（至少 1，推荐 10，尤其表格在 Modal 或弹层里时）
• 额外建议：加 border-bottom（比如 1px solid #ddd），否则表头和第一行之间容易视觉断裂

列宽错位、表头和内容对不齐怎么办

错位几乎都来自默认的自适应列宽机制——滚动时 <th> 和 <code><td> 宽度计算不同步。这不是 bug，是表格布局模型的固有行为。 <ul><li>禁用 <code>border-collapse: collapse 同时又在 <th>/<code><td> 单独设 <code>border，会导致像素级偏移

• 统一用 table-layout: fixed，再配合显式列宽（如 th:nth-child(1) { width: 120px; }）
• 如果列宽动态变化（比如用户缩放、内容长度不确定），就得用 JS 同步：th[i].style.width = td[i].offsetWidth + "px"，并在 resize 和 scroll 时节流更新
• 别给 <table> 设 <code>display: block 或 flex，会破坏语义和列对齐逻辑

  IE11 及更老浏览器怎么降级

  position: sticky 在 IE 全系都不支持，包括 IE11。这时候不能靠 polyfill “硬补”，而要结构级替换。

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

  • 保留原 <thead>（保证语义和可访问性），但把 <code><thead> 和 <code><tbody> 拆成两个独立 <code><table> <li>用 JS 监听 <code>scroll 和 resize，同步两者的列宽（th[i].style.width = td[i].clientWidth + "px"）
  • 或者用 position: absolute + 动态计算 top 值，但注意避免在 scroll 中触发重排，加 requestAnimationFrame 节流
  • iOS Safari 旧版（transform: translateZ(0) 或显式 width 才能正确计算 sticky 区域
  实际最易被忽略的点是：**<th> 的 <code>background-color 和 z-index 必须同时存在，且不能靠继承或 unset**。很多人设了背景但漏了 z-index，或者用了 rgba(255,255,255,0.9)，结果在深色主题下依然透出底色——最终效果就是“表头好像固定了，但文字看不清”。