结论：用 grid-template-areas + grid-column/grid-row 显式控制跨行跨列更可控、易响应、少错位，尤其适合金融数据的多级表头、冻结列与小数点对齐场景。
直接说结论：用 grid-template-areas + grid-column/grid-row 显式控制跨行跨列，比依赖 colspan/rowspan 的 table 更可控、更易响应、更少错位——尤其在金融数据中频繁出现的“多级表头+冻结列+数值对齐”场景下。
多行表头必须用 grid-area 命名，别靠 HTML 合并单元格
金融报表常见“一级表头→二级分组→三级字段”三层结构，HTML <th colspan="2" rowspan="2"> 在缩放、打印或高 DPI 屏幕下极易断裂，且无法配合 <code>position: sticky 冻结中间层。
实操建议：
- 给每个逻辑区块（如“成本分析”“收入明细”）分配唯一
grid-area名，例如"cost-header"、"revenue-group" - 用
grid-template-areas按行写死布局结构，比如："cost-header cost-header revenue-group revenue-group"<br>"cost-col1 cost-col2 revenue-col1 revenue-col2"
- 每个
<div class="th"> 对应一个区域名，通过 <code>grid-area: cost-header绑定，避免 DOM 顺序与视觉顺序错位数值列右对齐 + 小数点对齐，靠 minmax() 和 text-align: right 不够
金融数据要求金额列小数点严格垂直对齐，单纯
text-align: right在不同数字长度下仍会偏移；而minmax(120px, 1fr)若没配min-width: 0，长文本（如“应付账款-长期-关联方”）会撑爆整列。立即学习“前端免费学习笔记（深入）”；
响应式金融公司HTML5网站模板下载响应式金融公司HTML5网站模板是一款适合提供家族财富管理、节税互助基金、保险投资、节税投资、财务策划和在线投资计划等服务的金融公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
实操建议：
- 金额列容器加
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，而是当某列突然插入带换行的备注内容时，整行高度被拉伸，导致相邻列的grid-row跨度失效——这时候得用align-items: start替代默认的stretch，并给每行显式设grid-auto-rows: minmax(48px, auto)。 - 金额列容器加
