用 grid-template-areas + grid-column/grid-row 显式控制跨行跨列更可控、易响应、少错位，尤其适合金融/bi报表的多级表头、冻结列与小数点对齐场景。
直接说结论：用 金融报表常见“一级表头 → 二级分组 → 三级字段”三层结构。 单纯 只给第一行加 一旦某单元格含多行文本（如“备注：该合同已延期三次，详见附件2026-Q2-REV-07.pdf”），默认 grid-template-areas + grid-column/grid-row 显式控制跨行跨列，比依赖 <table> 的 <code>colspan/rowspan 更可控、更易响应、更少错位——尤其在金融/BI类报表中频繁出现的“多级表头+冻结列+小数点对齐”场景下。
多级表头必须用
grid-area 命名，别靠 HTML 合并单元格<th colspan="2" rowspan="2"> 在缩放、打印或高 DPI 屏幕下极易断裂，且无法配合 <code>position: sticky 冻结中间层。
grid-area 名，例如 "revenue-header"、"cost-group"、"yoy-subheader"
grid-template-areas 按行写死布局结构，每行列数必须一致，空白用 . 占位：grid-template-areas:
"revenue-header revenue-header cost-group cost-group"
"rev-col1 rev-col2 cost-col1 cost-col2"
"yoy-subheader yoy-subheader yoy-subheader yoy-subheader";
<div class="th"> 绑定对应 <code>grid-area，避免 DOM 顺序与视觉顺序错位
金额列小数点对齐，光靠
text-align: right 不够text-align: right 在不同数字长度下仍会偏移；minmax(120px, 1fr) 若没配 min-width: 0，长文本（如“应收账款-账龄超90天-关联方”）会撑爆整列。
min-width: 0 + overflow: hidden，防文本溢出破坏网格轨道display: grid，列定义为 grid-template-columns: 1fr max-content，把小数点前/后拆成两个子网格项justify-content: flex-end 控制整列右对齐，子项内用 text-align: right 保证小数点后贴边冻结首两行表头 + 右侧操作列，
sticky 必须按层设 top 值position: sticky; top: 0，第二行表头会随滚动消失；若全设 top: 0，它们会重叠。
top: 0
top: 48px（假设首行高 48px），确保滚动时刚好接续吸附grid-column: -2 / -1 锚定最右一列，并加 position: sticky; right: 0; z-index: 10
overflow-y: auto，否则 sticky 在局部滚动容器里不生效真正难的不是写对
grid-template-rows，而是某列突然插入带换行的备注内容时，整行高度被拉伸align-items: stretch 会让整行所有列同步撑高，破坏对齐节奏。
align-self: start，防止它拖累同行其他列align-items: center，避免文字上下浮动导致视觉割裂display: flex; flex-direction: column + min-height 替代纯 grid 自动拉伸
