最稳方式是给 td 或 th 直接加 style="text-align: right;";整表右对齐用 table td, table th { text-align: right; };单列推荐加类名如 num-col 配 css;grid/flex 中用 justify-self: end 或 margin-left: auto;注意可访问性与优先级覆盖问题。

给特定 <td> 或 <code><th> 加 <code>style="text-align: right;"
最直接、兼容性最好、也最容易验证效果的方式。不需要改结构、不依赖父容器样式,哪里需要右对齐就加到哪里。
-
text-align: right是专为单元格内容设计的属性,对数字、文本都生效 - 写在单个单元格上:
<td style="text-align: right;">123.45</td>,立刻生效,调试时一眼可见 - 避免用
align="right"—— HTML5 已废弃,部分浏览器(如 Safari 某些版本)可能忽略或渲染异常 - 注意:如果该单元格内嵌了
<div> 或其他块级元素,<code>text-align不会自动传递下去,需单独设子元素样式用 CSS 类名统一控制某列(比如数字列)
比内联样式更易维护,尤其当整列都是金额、序号、百分比这类需右对齐的数据时。
- 给目标列所有单元格加相同类名,例如:
<td class="num-col">¥2,499.00</td> - 配套 CSS:
.num-col { text-align: right; },可放在<style></style>或外部 CSS 文件中 - 别写成
table .num-col这种过度限定的选择器——除非你真要排除其他表格里的同名类 - 如果用了 UI 框架(如 Bootstrap),检查是否被
td { text-align: left !important; }覆盖;此时优先改类名 specificity,而不是加!important
为什么
text-align: right有时没反应?不是代码写错了,大概率是样式被覆盖或继承链出问题。
- 打开浏览器开发者工具,选中单元格 → 看 “Computed” 面板里
text-align的最终值,确认是不是left或inherit - 常见干扰源:父级
<table> 或 <code><tr> 设了 <code>text-align: left,而<td> 默认继承;此时直接给 <code><td> 设值就能破除继承 <li>某些框架(如 Ant Design 表格组件)会给 <code>td设text-align: inherit,导致它去继承一个没设值的祖先,结果 fallback 到left;显式设text-align: right即可覆盖 - 内联样式(
style="")优先级高于普通 CSS 规则,但低于带!important的规则;调试时先删掉所有!important再试 - 确保数字前后没有全角空格或不可见字符:
<td> 123.45 </td>右对齐后右边会多出空白 - 用等宽字体提升可读性:
.num-col { font-family: 'SFMono-Regular', Consolas, monospace; } - 负号统一用 ASCII 减号
-,别用 Unicode 全角减号−(U+2212),后者宽度不同,对不齐 - 真要小数点对齐(如财务报表),
text-align: right不够用,得用tabular-nums字体特性 +monospace,或改用<pre class="brush:php;toolbar:false;"></pre>+ 格式化字符串(但语义和可访问性会受损)
数字列右对齐的视觉细节容易被忽略
右对齐只是第一步,数字列真正难的是“看起来整齐”。小数点飘、负号错位、空格混入,都会破坏专业感。
- 给目标列所有单元格加相同类名,例如:











