小数点对齐需三步：用等宽字体+tabular-nums、intl.numberformat统一格式化、语义拆分数字与单位；text-align:char因兼容性差且不稳定不可用于生产。
text-align: right 只是起点，不是终点
纯右对齐 text-align: right 会让 “12.34” 和 “1234.567” 的末尾对齐，但小数点本身会浮动——因为默认字体中数字宽度不等（“1”比“0”窄，“.”也不固定）。这不是 bug，是字体渲染本质。你看到的错位，根源在字符宽度，不在 CSS 写错了。
- 必须搭配等宽字体：
font-family: "SFMono-Regular", Consolas, monospace - 必须启用等宽数字特性：
font-variant-numeric: tabular-nums - 避免在单元格里混入单位或符号（如
¥123.45），它们不受tabular-nums控制 - 表头也要显式设
th.numeric { text-align: right; }，因为th默认居中，会覆盖列样式
为什么 text-align: char 不要碰
text-align: char 看起来是解药，实际是陷阱。它要求同时写 text-align: char、char: '.'、text-align-last: auto，且只对单行文本有效。Chrome 从 v107+ 才支持，Firefox 少数版本能用，Safari 至今不支持（2026 年 7 月仍为实验性）。
- 换行后立即失效——表格单元格内容一旦折行，对齐基准就崩了
- 子元素（如图标、
<span class="unit">kg</span>）会破坏对齐，因为它只作用于当前元素的**内联文本流** - 即使生效，也只认第一个小数点；像
12.34.56这种会以第一个点为基准，不可控 - 生产环境上线前，务必在目标浏览器里跑
getComputedStyle(el).fontVariantNumeric和实际渲染对比
真正靠谱的三步落地法
别指望纯 CSS 一步到位。稳定对齐靠的是数据准备 + 字体控制 + 结构隔离。
- 后端或 JS 用
Intl.NumberFormat统一格式化：new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(1234.5)→"1,234.50" - 前端拆分结构：
<td> <span class="num">1234.50</span><span class="unit">¥</span> </td>，只给.num加等宽样式 - CSS 写死宽度或用
table-layout: fixed配合width，防止列宽随内容伸缩导致错位
混合内容（如 “24 kg”）怎么对齐
数字和单位宽度天生不等（“kg” vs “℃” vs “%”），强行塞进一个 <td> 里，再怎么调 CSS 都会歪。唯一办法是放弃“一格一值”的直觉，接受语义拆分。
<ul>
<li>不要写 <code><td>24 kg</td>，改用 <td>
<span class="num">24</span><span class="unit">kg</span>
</td>
.num 负责等宽对齐：font-variant-numeric: tabular-nums; font-family: monospace;
.unit 用固定宽度或 text-align: left + padding-left 对齐，比如 width: 2em
-，否则 tabular-nums 不识别Intl.NumberFormat 补零，或用了带逗号的字符串，或没拆开单位——都会让前面所有样式失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
