position: sticky 是唯一可行解法，因 CSS Grid 无原生“冻结窗格”机制；需对表头单元格设 sticky+top，且 Grid 容器必须有 max-height 和 overflow: auto 才能生效。
为什么 position: sticky 是唯一可行的解法
CSS Grid 本身不提供“冻结窗格”原语，grid-template-rows 或 overflow 都无法单独锁定某一行。真正起作用的是 position: sticky —— 它让元素在滚动时相对视口“粘住”，且与 Grid 的行轨道天然兼容。关键在于：必须把表头单元格（<th>）设为 <code>sticky，而不是整个 <thead> 容器；Grid 容器本身需有明确高度和 <code>overflow: auto，否则滚动无意义。
Grid 容器和表头单元格的必要样式组合
常见错误是只加 position: sticky 却漏掉 top 值或父容器约束，导致粘性失效。以下是最小可靠配置：
-
display: grid的容器必须设置max-height（如max-height: 400px）并启用overflow: auto - 每个
<th> 需同时声明：<code>position: sticky、top: 0、z-index: 1（避免被后续行遮盖） - 若有多行表头（如合并列标题+分组标题），第二行需设
top: 32px（假设第一行高 32px），依此类推 - 务必给
<th> 设置背景色，否则滚动时文字会和下面内容重叠 <pre class="brush:php;toolbar:false;">table-grid { display: grid; grid-template-columns: 100px 1fr 120px; max-height: 300px; overflow: auto; } th { position: sticky; top: 0; background: #fff; z-index: 1; border-bottom: 1px solid #ccc; }</pre> <h3>兼容性陷阱：Safari 和嵌套 Grid 的 sticky 行为差异</h3> <p><code>position: sticky在 Safari 中对 Grid 子项的支持直到 iOS 16.4 / macOS Ventura 才稳定；更早版本可能完全失效。另一个隐蔽问题是：如果 Grid 容器本身是某个 Flex 或 Grid 的子项，且父级设置了overflow: hidden，会截断 sticky 效果——这是 Safari 尤其爱犯的毛病。
kashen-mysql DDLtoExcel下载解析 MySQL 8.0 的 DDL 脚本，并将表结构导出为 Excel 格式。适用于用户需将 MySQL 的 `CREATE TABLE` 语句转换为结构化的 Excel 文件场景，导出内容包含字段名、数据类型、长度及精度等信息。支持多张表的批量处理，每张表对应 Excel 中的一个独立工作表。适用于数据库文档编写、数据字典生成及模式分析等任务。
- 检测方式：在 Safari 中打开 DevTools，选中
<th>，看 Computed 面板里 <code>position是否仍显示为sticky，且top有生效值 - 绕过方案：用
transform: translateY(0)强制触发硬件加速（仅限 Safari） - 不要把 Grid 容器放在
overflow: hidden的祖先内，哪怕只是临时调试也容易踩坑 - 左上角单元格：
top: 0; left: 0; - 首列其他单元格（非首行）：
left: 0;（不设top） - 首行其他单元格（非首列）：
top: 0;（不设left） - 所有 sticky 单元格必须有明确
background，否则交叠区域会透出下方内容
当需要冻结首列+表头时，
left和top必须共存Excel 冻结窗格常需同时锁定左列和顶行。此时
<th> 要同时设 <code>top: 0和left: 0，但注意：只有左上角单元格（即第一行第一列）能同时生效；其余首列表头只需left: 0，其余表头只需top: 0。否则会出现错位或渲染异常。立即学习“前端免费学习笔记（深入）”；
最易被忽略的是：sticky 元素的“粘性范围”严格依赖其最近的具有滚动机制的祖先。Grid 容器没设
max-height+overflow，或者被包裹在display: contents的父元素里，都会让sticky彻底失灵——这种问题不会报错，只会静默失效。 - 检测方式：在 Safari 中打开 DevTools，选中
