结论：必须用<div>模拟表格并显式定义grid-template-columns，因<table>有独立渲染逻辑导致表头与内容列宽脱节；Grid容器需设高度+overflow-y:auto，表头用position:sticky;top:0;z-index:10，且所有行单元格须统一span方式、加min-width:0并处理滚动条空间。
直接说结论：用 display: grid 实现 Excel 式固定表头，必须放弃原生 <table> 结构，改用 <div> 模拟表格，并显式定义列轨道。否则表头和内容列宽必然脱节，滚动时错位。
为什么不能直接在 <table> 上套 display: grid？
浏览器对 <table> 元素有独立渲染逻辑，即使外层设了 display: grid，<thead> 和 <tbody> 仍按表格语义计算尺寸，不参与 Grid 轨道对齐。结果就是：表头列宽和内容列宽各自算一套，滚动时完全错开。
常见错误现象包括：<thead> 看起来“固定”了，但列与列之间明显偏移；或者 Safari 下完全不生效；又或者滚动条出现后右侧列被挤压变形。
- 禁用
<table>、<tr>、<td>标签，全部换成<div> - 整个容器设
display: grid，并用grid-template-columns显式声明每列宽度（如120px 1fr 150px） -
<thead>和<tbody>对应的<div>必须是该 Grid 容器的**直系子元素**
如何让表头真正 sticky 且不被内容穿透？
关键不是 z-index 数值够不够大，而是 stacking context 和滚动上下文是否正确建立。很多项目加了 z-index: 999 还是被盖住，问题出在层级结构没理清。
立即学习“前端免费学习笔记（深入）”；
- Grid 容器必须设明确高度（
height或max-height）+overflow-y: auto - 表头容器（如
.thead）设position: sticky; top: 0; z-index: 10 - 内容容器（如
.tbody）不要设position，但内部每个行级<div>要设min-height: 0防止撑高整行 - 避免给
.tbody或其父容器加transform、will-change，否则会创建新 stacking context，让z-index失效
列宽对齐的三个硬性约束
Grid 不像表格有自动列对齐语义，所有列宽一致性都靠手动约束。漏掉任意一条，滚动时就会“跳格”。
- 所有行（表头行 + 数据行）都必须使用相同的
grid-column: span 1分配方式，不能有的用grid-column: 1 / -1，有的靠顺序自动占位 - 每个单元格（
.td）加min-width: 0，防止长文本强制撑开列宽 - 为防滚动条挤占空间，建议在 Grid 容器上加
scrollbar-gutter: stable both（Chrome/Edge/Firefox 支持），或手动预留padding-right: 16px
最易被忽略的点：display: contents 的使用场景有限制——它会让元素失去盒模型，如果单元格需要边框、背景或 padding，就不能简单套用；此时得改用 grid-column 显式定位，而不是依赖 DOM 顺序。
