财务报表必须使用语义化<table>，因其能确保导出Excel、屏幕阅读器解析和打印分页的结构保真；金额对齐需分离数字与单位，配合text-align:right和font-variant-numeric:tabular-nums。
财务报表必须用语义化 <table>，不能用 CSS Grid 或 Flex 模拟；金额数字对齐的关键不是“让所有字符等宽”，而是分离数字与单位、配合 text-align: right 和 font-variant-numeric: tabular-nums。
为什么财务报表非得用原生 <table>？
因为导出 Excel、屏幕阅读器解析、打印分页这三件事，只有真实 <table> 能保真。比如 colspan="4" 在 Excel 中会生成一个真正合并的单元格，而 display: grid 渲染出来的只是视觉效果，导出后就是散开的 4 个独立单元格。财务数据一旦结构失真，审计或上报就可能被拒。
常见错误现象：<div role="table"> 或 <table role="presentation"> —— 这两类写法直接禁用了表格语义，财务系统和辅助工具会当普通文本处理。
- 必须用
<thead>/<tbody>明确划分结构，不能只靠 CSS 隐藏边框来“假装”是表头 -
<th>必须包裹真正具有标题含义的内容（如“2024年度”），不能只为了加粗而滥用 - 嵌套合并时，先画逻辑草图：标出每行该有多少个“可见列”，再反推哪些
colspan和rowspan是必需的
font-variant-numeric: tabular-nums 为什么单独用没用？
它只让数字 0–9 占相同宽度，但不会自动右对齐，也不影响 ¥、%、−（U+2212）等符号。所以给整个 <td> 加这个属性，像 "¥123.45" 或 "−17℃" 依然歪斜——因为 ¥ 和 ℃ 宽度不一致，且未对齐。
立即学习“前端免费学习笔记（深入）”；
必须搭配：
-
text-align: right（让整段内容右贴边） - 显式指定支持该特性的字体，例如：
font-family: "SF Mono", "Fira Code", monospace; - 浏览器检查是否生效：
getComputedStyle(el).fontVariantNumeric返回"tabular-nums"才算成功
旧版 Safari（≤15.3）和 Firefox（≤91）会直接忽略该属性，回退为比例数字，导致列明显参差。稳妥做法是先用 monospace 保底，再叠加 tabular-nums 提升可读性。
金额列怎么真正对齐？数字和单位必须拆开
真实财报里几乎没有纯数字，大多是 "24 kg"、"−1,234.56 €"、"100.00%" 这类混合内容。tabular-nums 只管中间那段连续数字，前后单位得单独控制。
推荐结构：
<td> <span class="num">1234.56</span> <span class="unit">€</span> </td>
对应样式：
.num { font-variant-numeric: tabular-nums; font-family: "IBM Plex Mono", monospace; }-
.unit { display: inline-block; width: 1.8em; text-align: left; }（固定单位宽度，避免€和%不同宽） - 整个
<td>设text-align: right，让.num右贴边，.unit左贴其后
负号要注意：用 Unicode 减号 −（U+2212），别用短横 -（U+002D）。后者不参与 tabular-nums 对齐，会导致 "−17" 和 "18" 错位。可统一用 ::before 替换或 JS 预处理。
最后提醒一个容易被忽略的点
table-layout: fixed 不是可有可无的装饰。当金额列含长单位（如 "USD (millions)"）或动态内容时，不设这个属性，浏览器会按实际内容撑开列宽，导致原本对齐的数字列在不同行宽度不一。加上后，列宽由第一行或 <col> 定义，后续所有行强制遵守，数字才能稳定右对齐。
