最稳方式是直接给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。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用浏览器开发者工具看 “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 很难发现。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！