根本原因是grid容器缺乏有效滚动上下文：需设置height/max-height、overflow-y: auto，并让表头为直系子元素且设position: sticky+top: 0+z-index；禁用table标签，改用div+grid-template-columns模拟表格结构以确保列宽对齐和层叠正确。
为什么 position: sticky 在 Grid 表格里不生效？
根本原因不是 sticky 写错了，而是它找不到有效的滚动上下文。Grid 容器设了 overflow-y: auto，但 <thead> 和 <code><tbody> 默认仍是表格语义元素，它们的渲染层叠和尺寸计算不受 Grid 轨道直接约束——浏览器会把 <code><table> 当作一个整体块参与 Grid 布局，内部结构仍走 table 渲染逻辑，导致 <code>top: 0 无法锚定到 Grid 容器的滚动边界。
常见错误现象包括：<thead> 完全不固定、滚动时消失、或只在部分浏览器（如 Safari）中有效。
<ul><li>确保 <code><thead> 和 <code><tbody> 是 Grid 容器的**直系子元素**，而非包裹在 <code><table> 里
<li>Grid 容器必须有明确高度（<code>height 或 max-height）且 overflow-y: auto
<thead> 必须设 <code>position: sticky + top: 0 + z-index（避免被 <tbody> 遮盖）
<li>禁用 <code><table> 相关标签；改用 <code><div> 模拟表结构，例如：<code><div class="grid-table">
<div class="thead">...</div>
<div class="tbody">...</div>
</div>
用 Grid 模拟表格结构：如何保证列宽对齐？
脱离 <table> 后，列宽容易错位，尤其当内容长度差异大时。Grid 本身不提供“跨行对齐单元格”的语义保障，必须靠显式轨道定义和子项约束来模拟。
<p>关键不是靠 <code>width 百分比，而是用 grid-template-columns 统一声明所有列，并让每一行子项都按相同顺序、相同 grid-column 占位。
- 给 Grid 容器设
grid-template-columns: 120px 1fr 150px 80px（根据实际列数与宽度需求调整） <div class="thead"> 和每个 <code><div class="tr"> 都设 <code>display: contents或统一用grid-column: 1 / -1确保占满整行- 每个单元格（
<div class="td">）设 <code>grid-column: span 1，并加min-width: 0防止长文本撑开列宽 - 为防滚动条出现时挤压右侧列，可在容器上加
scrollbar-gutter: stable both（现代浏览器支持），或手动预留padding-right: 16px <tbody> 的直接子项（如每行 <code><div class="tr">）需设 <code>contain: layout paint，隔离渲染层- 整个 Grid 容器要设
will-change: scroll-position（可选，提升滚动性能） - 避免在
<tbody> 上设 <code>margin-top或transform，这些会创建新层叠上下文，干扰 sticky 定位兼容性与降级处理要注意什么？
position: sticky在 IE 完全不支持，Android 4.4 及更早 WebView 也有问题；Grid 布局在旧版 Safari 中对subgrid或复杂嵌套支持有限——但本方案不依赖 subgrid，所以主要风险在 sticky。如果你必须支持 IE 或老安卓 WebView，不要尝试 polyfill
position: sticky，那会导致滚动卡顿和定位漂移。应直接降级为 JS 方案：监听scroll事件 + 动态设置top，或改用display: block分离 thead/tbody 的传统方案。现代项目中，真正容易被忽略的是：Grid 容器若用
aspect-ratio控制高度（比如适配卡片式表格），必须配合overflow-y: scroll，否则滚动行为不会触发——aspect-ratio不等价于高度约束，它只是比例计算依据。
滚动时表头被内容穿透覆盖怎么办？
这不是 z-index 数值不够的问题，而是 <thead> 和 <code><tbody> 处于同一 stacking context，且 <code><tbody> 的子项未被限制高度，导致渲染层溢出上浮。
<p>典型表现是：刚滚动时，第一行数据会短暂“顶”到表头下方甚至遮住它，直到滚动距离足够才被裁剪。</p>
<ul><li><code><thead> 必须设 <code>z-index: 10（数值只要大于 tbody 子项即可）
