财务报表必须使用原生标签并严格遵循语义结构，配合table-layout: fixed、等宽字体、tabular-nums及内容分离，才能实现准确右对齐与无障碍访问。
财务报表必须用原生 <table>，不能用 CSS Grid 或 Flex
<p>财务报表不是普通布局问题，<code><table> 的语义结构不可替代。屏幕阅读器依赖 <code>colspan 和 rowspan 理解数据层级，Excel 导出时也靠它们还原合并单元格。用 display: grid 模拟表格，导出后全是散开的单元格，审计或报送时会出错。
常见错误现象：<table role="presentation"> 被加在财报表上——这直接禁用了表格语义，屏幕阅读器无法识别行列关系，违反 WCAG 2.1 可访问性要求。
<ul><li>表头必须用 <code><thead>，数据行必须用 <code><tbody>，不能混在同一个 <code><tr> 里
<li>
<code>rowspan 不能跨 <thead> 到 <code><tbody>，HTML 规范不支持
<li>每行 <code><td>/<code><th> 的 <code>colspan 总和必须等于该表逻辑列数（以第一行为准）
text-align: right 是金额对齐的基础，但仅靠它不够
数字右对齐只是第一步。如果字体本身不提供等宽数字（proportional nums），即使设了 text-align: right，"100" 和 "9" 在同一列里仍会错位——因为 "1" 比 "9" 窄，"0" 比 "5" 宽，视觉上不垂直。
必须组合三要素：text-align: right + 支持 tabular-nums 的字体 + font-variant-numeric: tabular-nums。
- 中文字体如
"Microsoft YaHei"多数不支持tabular-nums，回退为比例数字，对齐失效 - 推荐显式指定字体栈：
font-family: "SF Mono", "Fira Code", "IBM Plex Mono", monospace - 负号要小心：用 Unicode 减号
−（U+2212），不是短横-（U+002D），后者不参与tabular-nums对齐
混合内容（如“¥123.45”）必须拆标签，不能全塞进一个 <td>
<p>把单位、符号和数字混在一个 <code><td> 里，<code>font-variant-numeric: tabular-nums 只作用于数字部分，“¥”“.”“%”宽度不受控，整体还是歪的。
正确做法是结构分离：
<td> <span class="num">123.45</span> <span class="unit">¥</span> </td>
-
.num设font-variant-numeric: tabular-nums+ 等宽字体 -
.unit设固定宽度（如width: 1.2em）或text-align: left+padding-left: 0.3em - 避免用
float或position: absolute拆分，否则打印时易错位、屏幕阅读器读不出顺序
table-layout: fixed 和 border-collapse: collapse 是稳定排版的前提
默认的 table-layout: auto 会让浏览器根据内容动态计算列宽，金额列一旦出现长文本（比如“其中：出口销售收入”），整列会被撑宽，破坏右对齐效果。
table-layout: fixed 强制按 <col> 或首行 <th> 宽度分配空间，配合 <code>border-collapse: collapse 消除双线边框带来的额外干扰，才能保证数字列宽度一致、对齐不漂移。
- 必须给
<col>或首行<th> 显式设 <code>width，例如<col style="width: 120px"> - 不要只设
table { width: 100% }就完事——没table-layout: fixed，100% 也没用 - 检查方式：打开开发者工具，看
getComputedStyle(table).tableLayout是否返回"fixed"
实际排版中最容易被忽略的，是字体支持与结构分离的耦合性：哪怕写了
tabular-nums，只要字体不支持，或者数字被单位/符号打断，右对齐就只是“看起来对”，不是“真对齐”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
