position: sticky不生效需同时满足三个硬性前提：指定阈值（如top: 0）、父容器高度足够、滚动上下文正确；表格中失效主因是及其祖先不支持sticky，且需处理列宽对齐与ie兼容问题。
直接用 position: sticky 就能搞定，但不是写上就生效——它有三个硬性前提，缺一不可。
为什么 position: sticky 不生效？
最常见的问题是：加了 top: 0 却毫无反应。根本原因不是代码写错，而是滚动上下文缺失或样式冲突。
<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>列宽错位怎么避免？</h3> <p>表头和内容列对不齐，是 <code>sticky方案里最常被忽略的坑。浏览器默认按内容撑开列宽，而sticky的<th> 和普通 <code><td> 在渲染时可能走不同路径。 <ul><li>给 <code><table> 加 <code>table-layout: fixed，强制按第一行（即<thead>）定义列宽 <li>为每个 <code><th> 和对应 <code><td> 设置相同宽度，例如 <code>width: 20%或具体像素值（如width: 120px）- 如果列宽需响应式变化，用
min-width+flex容器包裹表格，比纯百分比更可控 - 把
<thead> 提到表格外，单独做一个只含表头的 <code><table><li>数据部分用另一个 <code><table>，包裹在 <code>max-height: 300px; overflow-y: auto的<div> 里 <li>列宽靠 <code>table-layout: fixed+ 统一width属性维持对齐，避免 JS 计算（除非列宽完全动态） - 若必须动态适配，监听
resize和首次渲染，用getBoundingClientRect()读取第一行<td> 宽度，再赋给对应 <code><th> <p>真正麻烦的不是实现本身，而是「列宽对齐」和「IE 兼容」这两处细节——它们不会报错，但会让表头看起来像“漂移”或“错位”，用户一眼就能察觉。动手前先确认目标浏览器范围，再决定要不要加 JS 保底。</p> </th>
IE11 及以下浏览器怎么办？
position: sticky 在 IE 完全不支持，降级方案不是“重写逻辑”，而是“结构分离 + 列宽同步”。
