text-align: right 必须作用于 td/th 元素，不能仅设在 table 或 tr 上；小数点对齐需 font-variant-numeric: tabular-nums + 等宽字体 + 结构分离（如 .num/.unit）+ table-layout: fixed 协同实现。
text-align: right 必须作用在 td 或 th 上
直接给 <table> 或 <code><tr> 加 <code>text-align: right 没用——浏览器不会继承到单元格里。td 默认继承自 body（通常是 left），不是父级 tr。
常见错误是写 .right-row { text-align: right; } 然后套在 <tr> 上，结果数字还是左对齐。
<ul>
<li>正确做法：用列选择器，比如 <code>td:nth-child(3), th:nth-child(3) { text-align: right; }
<td class="amount">1234.56</td>，再写 .amount { text-align: right; }
align="right"：HTML5 已废弃，W3C 验证失败，且易被 Bootstrap/Tailwind 重置小数点对不齐？tabular-nums + 等宽字体才是关键
纯 text-align: right 只保证字符串末尾对齐，不是小数点对齐。“12.34” 和 “1234.567” 在同一列里，小数点会浮动，肉眼难核对。
真正起作用的是让每个数字字符占相同宽度，靠 font-variant-numeric: tabular-nums，但它只影响数字 0–9、U+2212 负号和小数点，不控制 ¥、%、kg 等单位。
- 必须搭配支持该特性的字体，例如：
font-family: "SF Mono", "Fira Code", monospace; - 别把整个
<td>¥123.45</td>都套样式——¥ 和 . 宽度不同，整体仍歪斜 - 推荐结构分离：
<span class="num">123.45</span><span class="unit">¥</span>，分别控制 - 兼容性检查：运行
getComputedStyle(el).fontVariantNumeric，返回"tabular-nums"才算生效
混合内容（如“24 kg”）怎么对齐
单位宽度不一致（“kg” vs “℃” vs “%”），单靠 CSS 对齐无效。必须从 HTML 结构入手拆分可对齐部分和不可控部分。
- 不要写
<td>24 kg</td>，改用<td> <span class="num">24</span><span class="unit">kg</span> </td> -
.num设font-variant-numeric: tabular-nums+ 等宽字体 +text-align: right -
.unit用固定宽度（如width: 2em）或text-align: left配合padding-left对齐 - 负号要用 Unicode 减号 U+2212（−），不是 ASCII 短横（-），否则不响应
tabular-nums
table-layout: fixed 强化列宽稳定性
当数字位数差异大（比如“5” 和 “123456”），即使用了 tabular-nums，列宽仍会被内容撑开，导致对齐松散。
- 给
<table> 加 <code>table-layout: fixed - 为数字列的
<col>或<th> 显式设宽度，例如 <code><col width="120"> - 确保所有数字单元格使用相同字体栈和
font-variant-numeric声明，否则等宽数字优势会被拉伸抵消 - 别忘了
border-collapse: collapse，财务类表格尤其需要，避免双线干扰视觉
对齐不是加一两个 CSS 属性就能完事的事。它依赖字体支持、HTML 结构、数据格式三者协同——漏掉任意一环，小数点就飘了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
