text-align对数字右对齐有效，但需确保作用于td/th且无干扰元素；小数点错位时应使用tabular-nums或等宽字体，而非依赖text-align。
text-align 对数字对齐的实际效果取决于单元格内容类型
text-align 本身不区分数字或文字，它只按“行内内容”处理：左对齐（left）、居中（center）、右对齐（right）。但数字在表格中常需右对齐，因为这样更符合阅读习惯（个位对齐、便于列间比大小），而 text-align: right 正好能满足——前提是单元格里没有多余空格、换行或内联块级元素干扰。
常见错误是给 <td> 设置了 <code>text-align: right，但数字仍左偏。这时大概率是因为：
- 数字被包裹在
<span></span>或其他标签里，且该标签设置了display: block或float - 单元格内有看不见的空格或
- 用了
direction: rtl却没同步调整text-align
直接作用于 或
是最稳妥的做法
不要依赖父容器样式继承或全局重置，把对齐规则明确写在单元格标签上，或用类名统一控制：
<td style="text-align: right">12345</td>
<td class="num">678</td>
CSS 中定义：
.num { text-align: right; }
注意：text-align 在 <table> 或 <code><tr> 上设置不会向下继承到 <code><td>（除非显式声明 <code>td { text-align: inherit; }），所以别图省事写在行或表上。
遇到小数点/货币符号对不齐？这不是 text-align 的问题
当一列包含 12.34、567.890、,234.56 时，单纯 text-align: right 会让小数点错位——这是文本对齐的天然限制。此时 text-align 已无能为力，必须换方案：
- 用等宽字体（
font-family: monospace）+ text-align: right，让字符宽度一致，视觉上更齐
- 改用
tabular-nums 字体特性（需字体支持）：font-variant-numeric: tabular-nums
- 服务端或 JS 预处理，补空格或用
<span></span> 分离整数/小数部分再分别对齐（不推荐，增加 DOM 复杂度）
纯 CSS 方案里，tabular-nums 是最干净的解法，但得确认目标字体（如 system-ui、Segoe UI、Roboto）是否支持该特性。
移动端或旧浏览器要注意 direction 和 writing-mode 干扰
如果表格加了 direction: rtl（比如适配阿拉伯语），text-align: right 实际会变成“逻辑右”，即视觉左。这时候要么改用 text-align: end（响应书写方向），要么显式覆盖：text-align: right !important（慎用）。
更隐蔽的问题来自 writing-mode: vertical-lr —— 它会让 text-align 控制的是“顶部/中部/底部”，而非左右。只要没主动设垂直书写模式，这条基本不用管；但若项目用了 CSS 逻辑属性（text-align: start/end），就得确保所有环境都支持。
真正容易被忽略的，是混合使用 text-align 和 vertical-align：前者管水平，后者管垂直；但很多人调完 text-align 发现数字还是“飘”着，其实是 vertical-align: middle 没设，或者单元格有 padding 不均。
不要依赖父容器样式继承或全局重置，把对齐规则明确写在单元格标签上，或用类名统一控制：
<td style="text-align: right">12345</td> <td class="num">678</td>
CSS 中定义：
.num { text-align: right; }
注意：text-align 在 <table> 或 <code><tr> 上设置不会向下继承到 <code><td>（除非显式声明 <code>td { text-align: inherit; }），所以别图省事写在行或表上。
遇到小数点/货币符号对不齐？这不是 text-align 的问题
当一列包含 12.34、567.890、,234.56 时，单纯 text-align: right 会让小数点错位——这是文本对齐的天然限制。此时 text-align 已无能为力，必须换方案：
- 用等宽字体（
font-family: monospace）+text-align: right，让字符宽度一致，视觉上更齐 - 改用
tabular-nums字体特性（需字体支持）：font-variant-numeric: tabular-nums - 服务端或 JS 预处理，补空格或用
<span></span>分离整数/小数部分再分别对齐（不推荐，增加 DOM 复杂度）
纯 CSS 方案里，tabular-nums 是最干净的解法，但得确认目标字体（如 system-ui、Segoe UI、Roboto）是否支持该特性。
移动端或旧浏览器要注意 direction 和 writing-mode 干扰
如果表格加了 direction: rtl（比如适配阿拉伯语），text-align: right 实际会变成“逻辑右”，即视觉左。这时候要么改用 text-align: end（响应书写方向），要么显式覆盖：text-align: right !important（慎用）。
更隐蔽的问题来自 writing-mode: vertical-lr —— 它会让 text-align 控制的是“顶部/中部/底部”，而非左右。只要没主动设垂直书写模式，这条基本不用管；但若项目用了 CSS 逻辑属性（text-align: start/end），就得确保所有环境都支持。
真正容易被忽略的，是混合使用 text-align 和 vertical-align：前者管水平，后者管垂直；但很多人调完 text-align 发现数字还是“飘”着，其实是 vertical-align: middle 没设，或者单元格有 padding 不均。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
