应使用 grid-template-areas 替代 colspan/rowspan：将表头设为 Grid 容器，用命名区域布局，严格对齐行列；多层 sticky 表头需按层级设置递增 top 值与 z-index；容器须设 max-height 和 overflow-y: auto 以激活 sticky；金额列用嵌套 Grid 实现小数点精准对齐。
用 grid-template-areas 替代 colspan/rowspan
原生表格的 colspan 和 rowspan 在缩放、打印或高 DPI 屏幕下极易错位，且无法与 position: sticky 协同——因为 DOM 结构和视觉网格已脱钩。真实项目中（尤其是金融/BI 报表）必须放弃合并单元格写法。
正确做法是把整个表头当 Grid 容器，用命名区域显式布局：
- 每行表头对应一行字符串，列数必须严格一致，空白用
.占位 - 例如三层结构：
grid-template-areas: "header header header header" "group1 group1 group2 group2" "field1 field2 field3 field4" - 每个
<div class="th">绑定grid-area: group1等名称，不再依赖 HTML 顺序 - 这样即使某列内容换行拉高了行高，其他区域也不会被带偏——高度由
grid-template-rows显式约束
多层 position: sticky 表头需递进设置 top 值
只给第一行设 top: 0，第二、三行滚动后就消失了；全设 top: 0 又会堆叠在顶部。关键在于按视觉层级逐行设置不同 top 值：
- 首行（如“2026年Q2经营汇总”）：
top: 0 - 次行（如“营收明细｜成本拆解｜毛利分析”）：
top: 48px（假设首行高 48px） - 末行（如“金额｜占比｜同比｜环比”）：
top: 96px - 所有表头行都必须加
z-index，且数值依次递增（如10/11/12），否则会被后续内容遮盖
Grid 容器必须满足滚动上下文硬性条件
position: sticky 不生效？大概率不是 CSS 写错了，而是容器没形成有效滚动边界。Grid 容器默认是 overflow: visible，既不创建 BFC，也不触发滚动计算。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
max-height（如max-height: 400px）并启用overflow-y: auto - 表头元素必须是 Grid 容器的**直系子元素**，不能套在
<table>里——<table>会破坏轨道对齐 - 避免父级设置
transform、filter或will-change，这些会新建 stacking context 并干扰 sticky 定位 - 务必给表头单元格加背景色，否则滚动时文字会和下面内容重叠
金额列小数点对齐不能只靠 text-align: right
单纯右对齐在数字长度不一时仍会偏移。更稳的做法是用嵌套 Grid 控制对齐基线：
- 金额列容器设
display: grid; grid-template-columns: 1fr max-content; - 数字部分放左格，小数点放右格，用
justify-self: start和justify-self: end分别控制 - 同时给该列加
min-width: 0，防止长文本（如“应收账款-账龄超90天-关联方”）撑爆整列 - 若用
minmax(120px, 1fr)，漏掉min-width: 0就会失效
grid-template-areas 的字符串行数必须完全一致，差一个空格或 . 就整条规则被浏览器忽略；而 top 值一旦算错像素，多层 sticky 就会错位叠加，且这种错位在缩放后才暴露。 
