用 position: sticky 实现多层表头需逐行设置不同 top 值（如 0/48px/96px），配合 grid-template-areas 替代 colspan 控制布局，金额列用嵌套 Grid 实现小数点对齐，冻结右列需同步处理 overflow-x 和 stacking context。
用 position: sticky 冻结多层表头，别只设 top: 0
单层表头加 position: sticky; top: 0 是入门操作，但金融/BI报表常见“一级总览 → 二级分组 → 三级字段”三层结构。如果所有 <tr> 都设 top: 0，它们会堆叠在顶部；若只给第一行设，第二、三行滚动后就消失了。
真实做法是按视觉层级逐行设置不同 top 值：
- 首行（如“2026年Q2经营汇总”）：
top: 0 - 次行（如“营收明细｜成本拆解｜毛利分析”）：
top: 48px（假设首行高 48px） - 末行（如“金额｜占比｜同比｜环比”）：
top: 96px
关键点：必须确保父容器（比如 <div class="table-wrapper">）有 overflow-y: auto，否则 sticky 不触发；同时避免父级设 overflow: hidden 或 transform，这两者会让 sticky 失效。
用 grid-template-areas 替代 colspan/rowspan 控制多级表头
<th colspan="3"> 在缩放、打印或高 DPI 屏幕下容易错位，且无法与 sticky 协同——因为合并单元格的 DOM 结构和视觉网格已脱钩。真正可控的方式是把整张报表当 Grid 容器，用命名区域显式布局。
立即学习“前端免费学习笔记（深入）”；
例如三层表头可这样定义：
grid-template-areas: "header header header header" "group1 group1 group2 group2" "field1 field2 field3 field4";
每个 <div class="th"> 绑定对应 grid-area，比如：grid-area: group1。这样即使某列内容换行拉高了行高，其他区域也不会被带偏——因为高度由 grid-template-rows 显式约束，而非内容撑开。
注意：每行引号内列数必须一致，空位用 . 占位；区域名不能含空格或特殊字符。
金额列小数点对齐，不能只靠 text-align: right
单纯右对齐在数字长度不一时仍会错位：“123.45” 和 “1,234,567.89” 的小数点根本不在同一竖线上。解决方案是嵌套一层子 Grid：
- 外层列设
justify-content: flex-end，保证整体右对齐 - 该列内部再套一个
display: grid，grid-template-columns: 1fr max-content - 把数字拆成两部分：
"1,234,567"放第一列（1fr），".89"放第二列（max-content），后者用text-align: right
额外提醒：若列内容含长文本（如“应收账款-账龄超90天-关联方”），必须加 min-width: 0 + overflow: hidden，否则会撑爆整列轨道，破坏网格结构。
冻结右侧操作列时，z-index 和容器 overflow 必须同步处理
要让“操作”列始终在最右并吸边，需对最后一列的每个单元格设 position: sticky; right: 0; z-index: 10。但这里有两个隐藏陷阱：
- 如果表格容器（如
<div class="grid-table">）没设overflow-x: auto，sticky在横向滚动时不会生效 -
z-index只在同一个 stacking context 内有效；若父容器有transform、opacity < 1或will-change，会创建新层叠上下文，导致z-index: 10被截断——此时得给容器也加z-index: 1并设position: relative
真正难的不是写对这些样式，而是当某单元格突然插入多行备注（如“合同延期三次，详见附件2026-Q2-REV-07.pdf”）时，整行高度被拉伸，而其他列因 align-items: stretch 默认行为被迫同步拉高——这时候你得主动设 align-items: start 或为该列单独设 height，否则视觉节奏全乱。
