用 grid-template-areas + grid-column/row 显式控制跨行跨列更稳定，尤其适配多级表头、列冻结和小数点对齐；需命名 grid-area、设 minmax、overflow-hidden、sticky 分层定位及 align-items: start 防撑高。
直接用 grid-template-areas + grid-column/grid-row 显式控制跨行跨列，比模拟 <table> 更稳——尤其当表头多级、列要冻结、金额需小数点对齐时，colspan/rowspan 在缩放或高 DPI 下极易断裂。
多级表头必须用 grid-area 命名，别靠 HTML 合并单元格
金融/BI 报表常见“一级表头 → 二级分组 → 三级字段”三层结构。<th colspan="2" rowspan="2"> 看似简单，但打印、缩放、局部滚动时会错位，且无法和 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">绑定对应grid-area，避免 DOM 顺序与视觉顺序错位
金额列小数点对齐，光靠 text-align: right 不够
单纯右对齐在数字长度不一时仍会偏移；minmax(120px, 1fr) 若没设 min-width: 0，长文本（如“应收账款-账龄超90天-关联方”）会撑爆整列。
- 关键数值列外层加
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，它们会重叠。
立即学习“前端免费学习笔记（深入）”；
- 假设首行高
48px，第二行设top: 48px，确保滚动时刚好接续吸附 - 锚定最右一列，加
position: sticky; right: 0; z-index: 10 - 必须给整个表格容器加
overflow-y: auto，否则sticky在局部滚动里不生效
某列突然插入换行备注，整行高度被拉伸怎么办
一旦某单元格含多行文本（如“备注:该合同已延期三次,详见附件2026-Q2-REV-07.pdf”），默认 align-items: stretch 会让整行被撑高，破坏对齐。
- 给所有行容器设
align-items: start，让内容从顶部对齐 - 对备注类单元格单独加
white-space: normal; line-height: 1.4;，并限制最大行数（如display: -webkit-box; -webkit-line-clamp: 2;） - 避免在
grid-auto-rows里写死高度（如48px），改用minmax(48px, max-content)，兼顾紧凑与弹性
真正难的不是写对 grid-template-rows，而是当业务方临时加一行带图标+换行+tooltip 的备注列时，你得立刻判断该改 grid-area 还是调 align-self，而不是回退到 <table> 里硬塞 rowspan。
