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>或其任意祖先容器必须设置max-height+overflow-y: auto（不能是hidden或visible） -
<th>的直接父元素（通常是<tr>）不能有overflow: hidden、transform、will-change等会截断粘性行为的样式 -
<th>必须显式声明background-color和z-index（哪怕只是z-index: 1），否则滚动时文字会被下方<td>盖住或透出底色
如何正确写 position: sticky 表头样式？
推荐最小可用配置，避免引入多余干扰：
#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> 里；<th> 不能是空标签；如果用了 colspan 或 rowspan，确保 <thead> 内结构完整且无错行。
立即学习“前端免费学习笔记（深入）”；
IE11 及以下浏览器怎么办？
position: sticky 在 IE11 及更早版本中完全不支持，降级方案只能靠分离 DOM + JS 同步列宽：
- 把
<thead>单独抽成一个<div>，样式设为position: relative+ 固定高度 - 原表格只留
<tbody>，设为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 值就得重新计算——这点容易被忽略，导致固定列错位。
