数字右对齐需用text-align: right作用于<td>自身，配合font-variant-numeric: tabular-nums实现小数点对齐，并用text-align: end兼顾RTL场景，避免继承失效或全角字符干扰。
HTML 里没有叫“数字标签”的原生元素——<number> 不存在，<input type="number"> 是表单控件，不是用来展示数字的语义化标签。你要的其实是「表格或页面中数字内容的右对齐」，核心是 text-align: right，但直接写就错，原因和解法都在下面。
为什么给 <td> 加 text-align: right 还是左对齐？
不是 CSS 写错了，而是被覆盖或没生效：
- UI 框架（如 Bootstrap、Ant Design）默认设
td { text-align: inherit; }，而父级<tr>或<table>没设对齐值，最终继承浏览器默认的left - 用了
align="right"和style="text-align: right"混写，某些邮件客户端（Outlook）会优先解析废弃的align属性，导致样式冲突 - 检查“Computed”面板时发现生效值是
start或left，说明有更高优先级规则（比如table td选择器比.amount更强）
<td> 右对齐必须作用在单元格自身上
不能偷懒写在 <table> 或 <tr> 上：
- ✅ 正确：
<td class="numeric">¥1,234.56</td>+.numeric { text-align: right; } - ✅ 正确：
<td style="text-align: right">123.45</td>（邮件等弱环境唯一可靠方式） - ❌ 无效：
<table style="text-align: right"><td>123.45</td></table>——text-align不继承，也不作用于表格容器本身 - ❌ 无效：
<tr class="right-row"><td>123.45</td></tr>+.right-row { text-align: right; }——tr不是td的父块上下文，不触发继承
数字右对齐 ≠ 小数点对齐，别只靠 text-align
纯右对齐会让 12.34、1234.567、,876.00 的小数点浮动，核对困难：
立即学习“前端免费学习笔记（深入）”；
- 必须启用等宽数字：加
font-variant-numeric: tabular-nums（现代浏览器支持），并确保字体支持（如"SF Mono", monospace） - 负号要用 ASCII 减号
-123.45，别用 Unicode 全角减号−123.45（宽度不同） - 前后空格要清理：
<td> 123.45 </td>会导致右侧多出空白，右对齐后更明显 - 单位符号（¥、$、kg）建议和数字分离：
<span class="num">123.45</span><span class="unit">¥</span>，再分别控制
响应式或 RTL 场景下别硬写 right
写死 text-align: right 在阿拉伯语（RTL）页面里会把数字推到左边，逻辑错误：
- ✅ 推荐用逻辑值：
text-align: end（LTR 下 = right，RTL 下 = left） - ⚠️ IE11 不支持
end，需降级：direction: rtl; text-align: right;模拟 - 小屏强制左对齐？别只写
@media (max-width: 768px) { .numeric { text-align: left; } }，漏掉大屏重置会导致意外左对齐
真正麻烦的从来不是加一行 text-align: right，而是写完才发现小数点歪了、负号飘了、换框架全乱了——这些都得靠“Computed”面板逐层看，而不是凭感觉调。
