放弃table的colspan/rowspan，用grid-template-areas+显式grid-area命名是唯一能稳定支撑多级表头、滚动冻结、打印缩放和小数点对齐的方案。
放弃 <table> 的 colspan/rowspan，用 grid-template-areas + 显式 grid-area 命名是唯一能稳定支撑多级表头、滚动冻结、打印缩放和小数点对齐的方案。
为什么 colspan/rowspan 在复杂表格中必然失效
原生表格的合并单元格在以下场景会直接错位或断裂：
- 浏览器缩放（125% / 150%）时，
<th rowspan="2">的视觉高度与内容行不再对齐 - 高 DPI 屏幕（如 MacBook Retina）下，
border-collapse渲染精度丢失，跨行边框出现 1px 错位 -
position: sticky无法作用于被合并的单元格——DOM 结构和视觉网格已脱钩 - 打印预览中，
rowspan可能被截断在页尾，导致表头信息丢失
用 grid-template-areas 构建三层表头的实操写法
把整个表头容器设为 display: grid，每行对应一个字符串，列数必须严格一致，空白用 . 占位：
.header-grid {
display: grid;
grid-template-areas:
"title title title title title"
"groupA groupA groupB groupB groupC"
"field1 field2 field3 field4 field5";
grid-template-rows: 48px 36px 32px;
}
- 每个
<div class="th">必须是该容器的**直系子元素**，并设置grid-area: groupA等命名 -
grid-template-rows必须显式声明——否则某列换行拉高后，其他区域会被带偏 - 不能用
<table>包裹这些div，否则轨道对齐立即失效
让多层 position: sticky 表头真正“逐层吸附”
只设 top: 0 会导致第二、三层消失；全设 top: 0 又会堆叠。必须按视觉层级递进设置：
立即学习“前端免费学习笔记（深入）”；
- 第一行（如“2026年Q3财务汇总”）：
top: 0; z-index: 10; - 第二行（如“收入|成本|毛利|费用|净利”）：
top: 48px; z-index: 11; - 第三行（如“金额|占比|同比|环比|完成率”）：
top: 84px; z-index: 12;
关键前提：父容器必须有 max-height: 600px 和 overflow-y: auto，否则 sticky 不触发滚动上下文。
金额列小数点对齐的嵌套 Grid 写法
仅靠 text-align: right 或 minmax(120px, 1fr) 都不够稳。正确做法是给金额单元格加一层嵌套 Grid：
.amount-cell {
display: grid;
grid-template-columns: 1fr max-content;
min-width: 0;
overflow: hidden;
}
.amount-cell .integer { justify-content: flex-end; }
.amount-cell .decimal { text-align: right; }
-
min-width: 0是防止长字段（如“应付账款-长期-关联方”）撑爆整列的关键 - 小数点前部分用
justify-content: flex-end控制右对齐基线，后部分用text-align: right对齐小数点后的数字 - 务必给所有表头单元格加背景色，否则滚动时文字会和下方数据重叠
最易被忽略的一点：Grid 容器若被父级设置了 transform、filter 或 will-change，会新建 stacking context，直接导致 sticky 定位失效——检查 DOM 树上每一层父元素的样式。
