直接给加position: sticky无效，因原生table中thead与tbody共享匿名box、缺乏独立定位上下文；需改用Flex模拟三层结构（wrapper/header/body）并显式控制列宽对齐。
固定表头为什么不能直接用 position: sticky 在 <thead> 上？
<p>很多同学一上来就给 <code><thead> 加 <code>position: sticky; top: 0;，发现没效果——根本原因是：默认表格渲染模式下，<thead> 不是独立的滚动容器，它和 <code><tbody> 共享同一个匿名 box，<code>sticky 失效。浏览器对原生 <table> 的内部布局控制很严格，不暴露足够粒度的定位上下文。
<p>所以真要固定表头，要么改用 JS 监听滚动 + 动态计算（重、易错），要么绕开原生 table 渲染，用 Flex 模拟结构——后者更可控、语义清晰、兼容性好（Flex 支持到 IE10+）。</p>
<h3>用 Flex 模拟 Table 的三步结构拆解</h3>
<p>核心思路是把表格逻辑拆成三层独立容器：<code>.table-wrapper（带滚动）、.table-header（固定）、.table-body（可滚动），全部用 Flex 构建行列关系。
-
.table-wrapper 设为 display: flex; flex-direction: column; max-height: 400px; overflow: hidden;
-
.table-header 和 .table-body 都设为 display: flex; flex-direction: column;
- 每一行（
.row）设为 display: flex;，每个单元格（.cell）设固定 flex: 1; 或按需设 flex: 0 0 120px; 控制宽度
.table-wrapper 设为 display: flex; flex-direction: column; max-height: 400px; overflow: hidden;
.table-header 和 .table-body 都设为 display: flex; flex-direction: column;
.row）设为 display: flex;，每个单元格（.cell）设固定 flex: 1; 或按需设 flex: 0 0 120px; 控制宽度这样所有元素都脱离了原生 table 的渲染约束，.table-header 可自然固定，.table-body 单独加 overflow-y: auto; 实现滚动。
立即学习“前端免费学习笔记（深入）”；
Flex 表格列宽对齐的两个关键点
纯 Flex 模拟时，列宽容易错位——因为 header 和 body 是两个独立 flex 容器，子项宽度不会自动同步。必须显式约束：
- 所有
.cell必须使用flex: 0 0 ;（比如flex: 0 0 150px;），禁用flex: 1，否则不同行内容长度会拉伸列宽 - 或者统一用
min-width+max-width配合flex-shrink: 0;，例如：min-width: 120px; max-width: 120px; flex-shrink: 0; - 如果列数多且需响应式，建议用 CSS 自定义属性（
--col-width）集中管理，避免硬编码散落
漏掉其中任意一点，header 和 body 的列就会“错位”，尤其在缩放或字体加载后更明显。
IE10/11 下 Flex 表格的兼容性补丁
IE 对 flex-direction: column 嵌套支持弱，.table-body 内部的 .row 可能塌陷。必须加：
- 给
.table-body显式设height: 100%;（不能只靠flex: 1） - 给每个
.row加flex: 0 0 auto;，防止 IE 把它当弹性项压缩 - 避免在
.cell上用margin控制间距，改用padding或伪元素，IE 对 flex 项 margin 计算有 bug
另外，IE 不支持 sticky，所以固定表头方案在 IE 中实际是「绝对定位 + 手动同步滚动」，但 Flex 结构本身仍成立——这意味着你得准备两套定位逻辑，或直接降级为全量滚动（更稳妥）。
Flex 模拟 Table 最难的不是写出来，而是让 header 和 body 的列像素级对齐，以及在各种缩放、字体加载、动态插入行场景下保持稳定。别信“设个 flex 就完事”，宽度控制和 IE 兼容是真实卡点。
