货币符号与金额数字垂直对齐需拆分为两个span：.currency-symbol左对齐固定宽，.currency-value右对齐等宽减去符号宽，并配合Intl.NumberFormat统一格式化小数位与千分位。
货币符号和金额数字无法垂直对齐，不是你 CSS 写错了，而是 HTML 表格默认把整段文本当一个整体处理——$123.45 和 ¥8,900.00 字符数不同、宽度不同，text-align: right 只能对齐末尾字符，小数点自然漂移。
用 td[headers="currency"] 精准控制金额列样式
别给所有 <td> 加 <code>class="amount"，容易漏或误加。更稳妥的是语义化绑定：<th id="currency">金额</th> + <td headers="currency">¥12,345.67</td>，再写 CSS：
.currency-symbol { display: inline-block; text-align: left; width: 1.2em; }
.currency-value { display: inline-block; text-align: right; width: calc(100% - 1.2em); }这样即使表格列顺序调整、新增列，样式也不会错位。注意：headers 值必须与 th#id 完全一致，大小写敏感，空格也不行。
把货币符号和数值拆成两个 span 元素
这是解决符号与数字分离对齐最直接的方式，避免依赖字体特性或 JS 格式化：
立即学习“前端免费学习笔记（深入）”；
<td> <span class="currency-symbol">¥</span><span class="currency-value">12,345.67</span> </td>-
.currency-symbol设为text-align: left+ 固定宽度（如width: 1.4em），确保符号左缘对齐 -
.currency-value设为text-align: right+ 同样固定宽度，右缘对齐，小数点视觉上就稳了 - 不用等宽字体也能生效，兼容性比
font-variant-numeric: tabular-nums更广（旧版 Safari 不支持该特性）
Intl.NumberFormat 必须配合统一小数位输出
直接插原始数字进 DOM，会暴露浮点误差，比如 32.5 和 128.00000000000003，导致小数点错位加剧：
- 价格列统一用：
price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })→32.50 - 涨跌幅用：
changePercent.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2, signDisplay: 'exceptZero' })→+2.34或-1.05 - 千分位逗号必须开启（
useGrouping: true是默认值），否则12345.67和12,345.67混用，宽度差异更大 - 别在模板里写
{{ price | formatPrice }}这种未定义过滤器——没做格式化就渲染，错位立刻可见
等宽字体不是万能解，但能强化对齐效果
font-family: "SFMono-Regular", Consolas, monospace 确实能让 123.45 和 9876.50 的每个字符占相同宽度，配合 text-align: right 后小数点更齐，但它有硬伤：
- 系统字体链中，Windows 上
Consolas支持tabular-nums，但 macOS 的SFMono-Regular默认不启用该特性，得额外加font-variant-numeric: tabular-nums - 中文混排时，等宽字体的汉字会显得拥挤，影响可读性；纯数字列可用，但含中文表头或备注列就不合适
- 移动端部分 Android 系统不带
monospace中文字体， fallback 到默认字体后对齐失效
真正难搞的不是怎么对齐，而是怎么让对齐在不同设备、不同语言环境、不同金额格式（带逗号/不带、带符号/不带、整数/小数）下都稳定——拆 span + 格式化 + 固定宽度组合，目前仍是容错率最高的方案。
