position: sticky固定表头需满足三个硬性条件：父容器设max-height和overflow-y:auto创建滚动上下文；祖先链无transform/filter/will-change；th显式设background-color和z-index≥1，并规范使用thead。
直接用 position: sticky 就能实现表头固定在网页最上方，但必须满足几个硬性条件，否则它根本不生效。
为什么 position: sticky 不生效？
最常见的失效原因是父容器设置了 overflow: hidden 或没有滚动上下文。sticky 的定位参考点是「最近的具有滚动边界的祖先元素」，不是视口。
<thead> 或 <code><th> 本身不能设 <code>overflow: hidden，否则会截断 sticky 行为- 包裹
<table> 的外层容器（比如 <code><div>）必须有明确高度 + <code>overflow-y: auto，否则没有滚动边界 - 如果整个页面滚动，想让表头贴着浏览器顶部，就得把
<table> 放在 <code>body直接子级，并确保body没设overflow: hidden -
top: 0是相对于该滚动容器顶部，不是浏览器视口顶部——这点常被误判 <tbody> 要设 <code>display: block; max-height: 400px; overflow-y: auto;<table> 必须设 <code>border-collapse: collapse;，且所有<th> 和 <code><td> 建议用固定宽度（如 <code>width: 20%）或统一用table-layout: fixed;- 别忘了给
<th> 加 <code>border-bottom，否则和<td> 的边框会断开 <p>示例片段：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <pre class="brush:php;toolbar:false;"><div style="max-height: 400px; overflow-y: auto;"> <table style="width: 100%; border-collapse: collapse; table-layout: fixed;"> <thead> <tr> <th style="position: sticky; top: 0; background: #fff; z-index: 10; width: 25%; border-bottom: 1px solid #ddd;">姓名</th> <th style="position: sticky; top: 0; background: #fff; z-index: 10; width: 25%; border-bottom: 1px solid #ddd;">邮箱</th> <th style="position: sticky; top: 0; background: #fff; z-index: 10; width: 25%; border-bottom: 1px solid #ddd;">年龄</th> <th style="position: sticky; top: 0; background: #fff; z-index: 10; width: 25%; border-bottom: 1px solid #ddd;">城市</th> </tr> </thead> <tbody style="display: block; max-height: 300px; overflow-y: auto;"> <tr><td>张三</td><td>zhang@example.com</td><td>28</td><td>北京</td></tr> <tr><td>李四</td><td>li@example.com</td><td>32</td><td>上海</td></tr> </tbody> </table> </div></pre> <h3>IE11 及以下浏览器怎么兼容？</h3> <p>IE 完全不支持 <code>position: sticky，强行加也没用。务实做法是拆成两个独立<table>，一个放 <code><thead>，一个放 <code><tbody>，再用 JS 同步列宽。 <ul><li>两个 <code><table> 必须用相同 <code>table-layout: fixed+ 相同列宽（比如都设width: 25%） - 外层
<div> 设 <code>position: relative; max-height: 400px; overflow-y: auto; - 表头
<table> 设 <code>position: absolute; top: 0; left: 0; width: 100%; z-index: 2; - 内容
<table> 设 <code>margin-top: 表头高度（如 42px）;，避免被遮盖 - 如果列宽动态变化，必须监听
window.resize并重算列宽——这是最容易漏掉的点
position: sticky 正确写法（现代浏览器）
核心是：只动 <th>，不动 <code><thead>；<code><tbody> 必须可滚动；列宽必须对齐。
<ul><li>给每个 <code><th> 加：<code>position: sticky; top: 0; background: white; z-index: 10;
真正麻烦的不是写代码，而是列宽错位和滚动条宽度干扰。哪怕用了 table-layout: fixed，滚动条出现时也会挤占宽度，导致两层表格列不对齐——这个细节几乎每次都要手动补偿。
