HTML表格中数字右对齐需用CSS的text-align: right，但应单独作用于td而非tr或table；推荐用td[headers="amount"]选择器精准控制金额列，配合统一格式化和等宽字体确保小数点纵向对齐。
用 text-align: right 对单元格内容右对齐
HTML 表格本身不区分数字或文本，右对齐靠 CSS 控制。直接给 <td> 或 <th> 加 style="text-align: right" 最快见效，但别只加在 <tr> 或 <table> 上——那样会把文字也右推，反而影响可读性。
常见错误是给整列加 class 却忘了重置 <th> 的对齐方式，结果表头也右对齐，金额列看着像“倒着写”。建议单独控制数据单元格：
<td class="amount">$1,234.56</td>
对应 CSS 写成：
.amount { text-align: right; }
金额列用 td[headers="amount"] 选择器更稳妥
当表格有多个金额列（比如“应收”“实收”“税额”），用 class 容易漏加或误加。改用语义化方式：先给 <th> 设 id，再用 headers 属性关联 <td>，CSS 就能精准命中：
立即学习“前端免费学习笔记（深入）”；
<th id="amount">金额</th><br><td headers="amount">¥8,900.00</td>
然后写：
td[headers="amount"] { text-align: right; }
这样即使后续加新列、换顺序，样式也不会错位。注意 headers 值必须和 th#id 完全一致，大小写敏感，空格也不行。
数字右对齐时小心小数点错位问题
纯 text-align: right 对齐的是字符末尾，不是小数点。如果金额格式不统一（比如有的带千分位逗号，有的不带；有的保留两位小数，有的整数），视觉上小数点会浮动，核对困难。
解决办法只有两个：
- 后端或 JS 输出前统一格式化，确保所有金额字段都走同一套格式函数，例如
Intl.NumberFormat或toFixed(2) - 用等宽字体（如
font-family: 'SFMono-Regular', Consolas, monospace）+text-align: right，至少让字符宽度一致，小数点纵向对齐更可靠
别指望 CSS 自动对齐小数点——它没这功能，text-align-last: justify 也不管用。
用 <col> 批量控制列样式，但兼容性要注意
想一次性设置第 3 列全右对齐？可以写：
<colgroup><br> <col><br> <col><br> <col style="text-align: right"><br></colgroup>
但注意：<col> 只支持有限样式，text-align 在 Chrome/Firefox/Edge 没问题，但在 Safari 旧版本（≤15.6）里可能失效。如果目标用户含较多 macOS 老系统，建议降级为 class 方案。
另外，<col> 不影响 <th>，表头仍需单独处理；且它只作用于同列的 <td>，跨行合并单元格（rowspan）会脱离列上下文，样式不继承。
