原生 加 position: sticky 失效是因浏览器规范限制其与 共享匿名 box，无独立定位上下文；需用 flex 模拟三层结构并严格控制列宽对齐。
为什么原生 <thead> 加 <code>position: sticky 失效
因为浏览器对原生 <table> 的内部渲染做了强约束：<code><thead> 和 <code><tbody> 共享同一个匿名 box，没有独立的定位上下文。哪怕你给 <code><thead> 加了 <code>position: sticky; top: 0;，它依然被锁死在表格流里，无法真正“粘住”。这不是写法错，是规范限制。
用 Flex 模拟三层结构：.table-wrapper / .table-header / .table-body
核心是彻底脱离原生 table 渲染，改用三个独立 flex 容器分工：
-
.table-wrapper设display: flex; flex-direction: column; max-height: 400px; overflow: hidden; -
.table-header和.table-body都设display: flex; flex-direction: column;，且.table-header不加滚动，.table-body加overflow-y: auto; - 每行用
.row（display: flex;），每个单元格用.cell（必须用flex: 0 0 150px;或min-width: 150px; max-width: 150px; flex-shrink: 0;）
漏掉列宽显式控制，header 和 body 的列一定错位——尤其字体加载后或缩放时更明显。
IE10/11 下 flex 表格必须补的三处 hack
IE 对嵌套 flex-direction: column 支持弱，不处理会塌陷或高度丢失：
- 给
.table-body加height: 100%;（只靠flex: 1不够） - 给每个
.row加flex: 0 0 auto;，防止被 IE 当弹性项压缩 -
.cell上禁用margin控制间距，改用padding或伪元素；IE 对 flex 项 margin 计算有 bug
列宽对齐为什么总出问题？关键在 flex 值选错
用 flex: 1 看似省事，但它是“可伸缩”的——不同行内容长度不同，就会把列宽拉歪。必须用锁定宽度的写法：
-
flex: 0 0 120px;（推荐，语义清晰） - 或
min-width: 120px; max-width: 120px; flex-shrink: 0;（适合需要响应式微调的场景） - 多列时建议用 CSS 自定义属性统一管理，比如
--col-width-1: 120px;，避免硬编码散落各处
列宽不对齐是 flex 表格最常被忽略的细节，一旦漏掉，滚动时 header 和 body 就像两张错开的胶片——不是 bug，是设计没闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
