最稳方式是直接给td或th设text-align:right；整表右对齐易破坏语义，推荐单列右对齐；数字列需配合tabular-nums、等宽字体及统一格式化才能真正对齐。
直接给 td 或 th 加 text-align: right
这是最稳、兼容性最好、也最不容易出错的方式。现代浏览器全部支持，W3C 验证通过，屏幕阅读器和打印样式都正常。
常见错误是写在 table 或 tr 上——text-align 不继承到单元格，除非显式声明 td { text-align: inherit; }，但默认不是这样。
- ✅ 正确：
<td style="text-align: right">123.45</td> - ✅ 正确：
<th class="numeric">金额</th>+.numeric { text-align: right; } - ❌ 无效：
<table style="text-align: right"><td>123.45</td></table> - ❌ 无效：
<tr style="text-align: right"><td>123.45</td></tr>
为什么加了 text-align: right 还是左对齐
大概率是 CSS 优先级或框架默认值覆盖了你的规则。
Ant Design、Bootstrap、Tailwind 等 UI 框架通常重置 td 的 text-align 为 inherit 或 left，而父级没设值时就回退到浏览器默认的 left。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具看 “Computed” 面板，确认最终生效的
text-align值 - 检查是否有更具体的选择器（如
td:first-child、.ant-table-cell）覆盖了你的样式 - 避免滥用
!important；优先提高选择器特异性，比如用table.data td.amount
数字列右对齐，光靠 text-align: right 不够
它只能保证字符末尾对齐，小数点、负号、千分位符号会浮动，视觉上难核对。
真正让 12.34、1234.567、$9,876.00 纵向对齐，得组合处理：
- 启用等宽数字：
font-variant-numeric: tabular-nums（需字体支持，如system-ui、SFMono-Regular） - 强制等宽字体：
font-family: 'SFMono-Regular', Consolas, monospace; - 服务端或 JS 统一格式化为固定位数（如两位小数），避免
123.4和123.40并存 - 别用
text-align: char; char: ".";—— 仅 Firefox 实验性支持，生产环境不可靠
整表右对齐 vs 单列右对齐，怎么选
整表统一右对齐看似省事，但实际容易破坏语义：表头文字也被推到右边，识别成本上升；金额列右对齐合理，但“姓名”“状态”列右对齐反而反直觉。
- 整表右对齐（慎用）：
table td, table th { text-align: right; }→ 适合纯数字报表，且表头本身也是数值型 - 单列右对齐（推荐）：
<td class="amount">¥1,234.56</td>+.amount { text-align: right; }→ 语义清晰、不影响其他列、后续加货币符号对齐也方便 - 响应式注意：
text-align: right在小屏可能让长数字贴边溢出，建议搭配white-space: nowrap或容器设overflow-x: auto
真正麻烦的不是加个 text-align: right，而是数字列的小数点对不齐、框架样式覆盖、以及混入空格或全角字符导致的右对齐后多出空白——这些细节不查 computed styles 很难发现。
