最稳方式是给 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> 或 <th> 加 style="text-align: right;"
最直接、兼容性最好、也最容易验证效果的方式。不需要改结构、不依赖父容器样式，哪里需要右对齐就加到哪里。
-
text-align: right是专为单元格内容设计的属性，对数字、文本都生效 - 写在单个单元格上：
<td style="text-align: right;">123.45</td>，立刻生效，调试时一眼可见 - 避免用
align="right"—— HTML5 已废弃，部分浏览器（如 Safari 某些版本）可能忽略或渲染异常 - 注意：如果该单元格内嵌了
<div>或其他块级元素，text-align不会自动传递下去，需单独设子元素样式
用 CSS 类名统一控制某列（比如数字列）
比内联样式更易维护，尤其当整列都是金额、序号、百分比这类需右对齐的数据时。
- 给目标列所有单元格加相同类名，例如：
<td class="num-col">¥2,499.00</td> - 配套 CSS：
.num-col { text-align: right; }，可放在<style>或外部 CSS 文件中 - 别写成
table .num-col这种过度限定的选择器——除非你真要排除其他表格里的同名类 - 如果用了 UI 框架（如 Bootstrap），检查是否被
td { text-align: left !important; }覆盖；此时优先改类名 specificity，而不是加!important
为什么 text-align: right 有时没反应？
不是代码写错了，大概率是样式被覆盖或继承链出问题。
- 打开浏览器开发者工具，选中单元格 → 看 “Computed” 面板里
text-align的最终值，确认是不是left或inherit - 常见干扰源：父级
<table>或<tr>设了text-align: left，而<td>默认继承；此时直接给<td>设值就能破除继承 - 某些框架（如 Ant Design 表格组件）会给
td设text-align: inherit，导致它去继承一个没设值的祖先，结果 fallback 到left；显式设text-align: right即可覆盖 - 内联样式（
）优先级高于普通 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>+ 格式化字符串（但语义和可访问性会受损）
