真正的小数点对齐需四者协同：结构上数字与单位分离，格式上统一小数位数（如tolocalestring），字体上启用font-variant-numeric: tabular-nums并指定等宽字体，样式上设置text-align: right。
HTML 表格里价格数字右对齐容易，但小数点对不齐——这不是没加 text-align: right，而是没解决“字符宽度不一致”这个根本问题。
为什么 text-align: right 不能让小数点对齐
纯右对齐只保证字符串末尾（比如 99.99 的最后一个 9）在一条竖线上，但 1.23、1234.56、$9,876.00 的小数点位置天然浮动。这是因为默认字体（如系统默认的 sans-serif）中，数字 1 和 8 宽度不同，小数点和逗号也不等宽。
-
text-align是行内内容对齐，不是“按字符锚点对齐” - 旧式
align="char" char="."在现代浏览器中支持极差（Chrome 100+ 已移除，Firefox 仅部分版本实验性支持），且无法处理货币符号、千分位逗号 - 用空格或
font-variant-numeric: tabular-nums 是目前最干净的解法
它强制所有数字 0–9、小数点 .、Unicode 负号 −（U+2212）占用相同宽度，配合 text-align: right 就能实现视觉上真正的小数点列对齐。
- 必须搭配支持该特性的字体：
font-family: "SF Mono", "Fira Code", "IBM Plex Mono", monospace - 只作用于数字字符，不影响
¥、$、kg等单位——所以建议把单位和数字分离：<span class="num">123.45</span><span class="unit">¥</span> - 检查是否生效：
getComputedStyle(el).fontVariantNumeric返回"tabular-nums"才算成功；Safari 15.4 以下、Firefox 90 以下会静默回退
金额列必须统一格式化再渲染
即使用了 tabular-nums，如果原始数据是 123.4、4567.890、0，小数位数不一致，小数点仍会错位。
- 前端推荐用
toLocaleString()格式化：price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })→ 输出"123.40"、"4567.89"、"0.00" - 后端输出时就应返回两位小数字符串，避免前端重复判断
- 不要依赖模板引擎的未定义过滤器（如
{{ price | money }}），没做格式化就直出数字，错位立刻暴露 - 表头单元格
<th> 也必须加 <code>class="amount"并显式设text-align: right，因为<th> 默认居中，否则表头和数据列视觉割裂 <h3>结构层面拆分比样式更可靠</h3> <p>当一列含混合内容（如 <code>"24 kg"、"−12.3℃"、"100% "），单靠 CSS 无法让所有“数值部分”对齐，因为单位本身宽度不等。- 语义化拆分是唯一稳定方案：
<td> <span class="numeric">24</span><span class="unit">kg</span> </td>，再单独给.numeric加tabular-nums + text-align: right - 避免用
<td align="right"> 这类废弃属性，它和 CSS 冲突，Chrome 可能覆盖内联样式，Firefox 可能忽略 <li>整列控制优先用 <code>colgroup或td:nth-child(n)，但语义类（如class="price"）更利于维护和可访问性
真正的小数点对齐，是结构（数字/单位分离）、格式（固定小数位）、字体（
tabular-nums）、样式（text-align: right）四者缺一不可。漏掉任意一环，都可能在某个浏览器或某条数据上突然错位。 - 语义化拆分是唯一稳定方案：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
