text-align: right 必须作用于td或th元素，不能仅设在table或tr上；小数点对齐需配合等宽字体、统一格式化或tabular-nums，仅右对齐无法保证小数点纵向对齐。
text-align: right 必须作用在 td 或 th 上，不能只写在 table 或 tr
表格元素本身不继承对齐样式，table 或 tr 上设 text-align: right 对内部 td 无效——除非显式声明 td { text-align: inherit; }。浏览器默认 td 继承自 body（通常是 left），不是父级 tr。
常见错误是给整行加 class：<tr class="right-row">，再写 <code>.right-row { text-align: right; }，结果没用。正确做法是直接选中单元格：
td.amount, th.amount { text-align: right; }- 或更稳妥：
td[headers="price"], td[headers="total"] { text-align: right; } - 避免用
align="right"—— HTML5 已废弃，W3C 验证失败，且在 Bootstrap/Tailwind 等框架下极易被重置
小数点对不齐？text-align: right 不是万能解
纯右对齐只能保证字符末尾对齐，不是小数点对齐。当列中混有 12.34、1234.567、$9,876.00 时，视觉上小数点会浮动，核对困难。
真正稳定对齐小数点，得组合以下任一方案：
- 启用等宽数字：加
font-variant-numeric: tabular-nums（需字体支持，如system-ui、Segoe UI） - 强制等宽字体：
font-family: 'SFMono-Regular', Consolas, monospace; - 服务端或 JS 统一格式化为固定位数（如两位小数）再渲染，避免
123.4和123.40并存 - 别用
text-align: char; char: ".";—— 浏览器支持极差，仅 Safari 实验性支持，生产环境不可靠
金额列推荐用 td[headers="xxx"] 而非 class
当表格含多金额列（如“应收”“实收”“税额”），用 class 容易漏加、错加或随 DOM 变动失效。语义化方式更健壮：
-
<th id="receivable">应收</th>→<td headers="receivable">¥12,345.67</td> - CSS 写成：
td[headers="receivable"] { text-align: right; font-variant-numeric: tabular-nums; } -
headers值必须与th#id完全一致：大小写敏感、不能有空格、不能带引号 - 即使后续增删列、调整顺序，样式仍精准命中，不影响可访问性（屏幕阅读器能关联表头）
框架或重置 CSS 下 text-align 失效怎么办
用了 Bootstrap/Ant Design/Tailwind 后，常发现加了 text-align: right 没反应——大概率是框架的 td { text-align: left !important; } 或 td { text-align: inherit; } 覆盖了你的规则。
调试时优先看“Computed”面板里的实际值，再针对性覆盖：
- 提高选择器权重：
table.data-table td.amount比单纯.amount更强 - 避免
!important，改用内联样式临时验证：<td style="text-align: right;">...</td> - 检查是否被
th默认居中干扰：金额列的表头也需单独设th[headers="amount"] { text-align: right; }，否则表头左/中 vs 数据右，显得割裂 - 注意
col元素在 IE8 及更早版本不支持text-align，老项目需退回到td.numeric方案
text-align 永远搞不定；真正要稳，得字体、格式、选择器三者咬死。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
