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