不能直接用 Grid 冻结 table，因浏览器对 table 有独立渲染逻辑，thead/tbody 会各自计算列宽导致错位；需改用 div 模拟表格并显式定义 grid-template-columns。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么不能直接在

上用 Grid 做冻结

浏览器对 <table> 有独立渲染逻辑，即使外层加了 display: grid，<thead> 和 <tbody> 仍按表格语义各自计算列宽，结果就是滚动时表头和数据列完全错位。常见现象包括：Safari 下 position: sticky 失效、列宽跳变、右侧被滚动条挤窄。必须放弃原生 <table> 结构，改用 <div> 模拟表格，并显式定义 grid-template-columns。

多层级表头冻结：top 值必须递进，不能全设为 0

金融类报表常有三级表头（如“市场 → 板块 → 个股”），若所有行都设 top: 0，第二、三行会叠在第一行上；只设第一行 top: 0，其余又会随滚动消失。

• 第一行表头（如“代码”“名称”）设 top: 0
• 第二行表头（如“涨跌幅%”“换手率”）设 top: 48px（假设首行高 48px）
• 第三行表头需再叠加偏移，如 top: 96px，但前提是 Grid 容器 height 或 max-height 足够容纳全部固定行
• 所有表头行都要加 z-index，且数值依次递增（如 10 / 11 / 12），否则会被后续内容穿透

首列冻结：用 grid-column: -2 / -1 锚定 + right: 0

冻结右侧操作列（如“编辑”“导出”）相对简单，但冻结左侧首列（如“ID”“名称”）需注意方向与层级冲突。

• 首列单元格统一加 position: sticky; right: auto; left: 0;（注意不是 right: 0）
• 必须确保该列在 Grid 中有明确轨道位置，推荐用 grid-column: 1 / 2 显式定位，避免依赖自动顺序
• 若同时冻结首行和首列，左上角交点区域（即第一行第一列）要单独包裹并设最高 z-index（如 13），否则可能被某一层遮盖
• 避免给父容器设 transform 或 will-change，否则会创建新 stacking context，让 z-index 失效

列宽对齐的三个硬约束，漏一条就错位

Grid 没有表格的自动列对齐语义，所有列宽一致性靠手动强约束。实践中最常被忽略的是这三点：

立即学习“前端免费学习笔记（深入）”；

• 所有行（表头、数据行、分组行）必须使用相同的 grid-column: span 1 分配方式，不能混用 grid-column: 1 / -1 或隐式自动占位
• 每个单元格（.td 或 .th）必须加 min-width: 0，否则长文本或内联元素会强制撑开列宽
• Grid 容器建议加 scrollbar-gutter: stable both 预留滚动条空间；若需兼容旧浏览器，手动加 padding-right: 16px

真正难的不是写几行 CSS，而是让所有层级的 sticky 元素在同一个滚动上下文中互不干扰——top 值、z-index、容器高度、列宽声明，四者必须同步校准，差一点就会出现“看起来冻住了，但列一动就错位”的问题。