HTML怎么做粘性表头：sticky固定表头实现方法【快速上手】
说到给HTML表格加一个滚动时能“钉”在顶部的表头，position: sticky无疑是那条最轻量、最直接的路径。但很多开发者踩过坑：明明给thead th加上了top: 0，它却纹丝不动。问题出在哪？其实，sticky的生效远不止一行代码那么简单，它对表格的结构、父容器的设置乃至浏览器环境，都有一系列明确的“约束条件”。
为什么 thead th 加了 position: sticky; top: 0 却不粘？
核心症结往往在于父容器“截胡”了粘性行为。一个元素要想实现粘性定位，它必须在一个具备滚动能力的“上下文”里活动。而这个上下文，得由**离它最近的、能滚动的祖先容器**来提供。
具体来说，你需要检查这几个关键点：
- 包裹表格的外层
，必须同时设置max-height和overflow-y: auto。注意，overflow值不能是hidden或scroll，前者会彻底禁止滚动，后者则可能创建非预期的滚动条。 - 这个容器身上不能带有
transform、filter或will-change这类属性。它们会创建新的层叠上下文，无意中就把sticky的生效范围给“截断”了。 - 表格自身的结构也得规范：
标签本身别去设置display: block。正确的做法是把样式直接作用在th或tr上，比如这样写：.table-fixed thead th { position: sticky; top: 0; background: white; z-index: 10; }。- 如果整个表格又嵌套在
flex或grid布局里，还得确认这些布局容器没有限制子项的定位行为。如何保证列宽对齐不崩塌？
解决了“粘不住”的问题，下一个常见的头疼事就是列宽错位。当
部分独立滚动，而固定不动时，浏览器的重排机制有时会导致表头和表体的列宽对不上，尤其是在动态加载内容或网络字体渲染之后。要锁定列宽，可以试试这几招：
- 启用固定表格布局模型：给
table加上table-layout: fixed; width: 100%;。这能强制浏览器根据首行或指定的宽度来分配列宽，而不是根据内容动态计算。 - 为每一列的
th和td显式设置相同的宽度。例如：th:nth-child(1), td:nth-child(1) { width: 120px; }。 - 在设置宽度时，尽量避免混用百分比（
%）和弹性单位（fr）。统一使用px或字符单位ch，控制起来会更可靠。 - 对于列数多、宽度又不均的复杂表格，一个实用的技巧是用Ja vaScript：先读取第一行
td的offsetWidth，再把这个宽度值批量赋给对应表头的th的style.width。
IE11 或旧版 Safari 怎么兼容？
现实很骨感：
position: sticky在IE11上完全不被支持，而在Safari 15.4及更早的版本中也存在一些恼人的bug，比如z-index失效、top值偏移不准。面对这些老版本浏览器，指望用polyfill去“修补”往往事倍功半，更稳妥的做法是直接切换策略。市场上有几种经过验证的替代方案：
- 放弃原生的
- 如果整个表格又嵌套在
