html表格中数字右对齐需用css的text-align: right，但应单独作用于td而非tr或table；推荐用td[headers="amount"]选择器精准控制金额列，配合统一格式化和等宽字体确保小数点纵向对齐。
用 text-align: right 对单元格内容右对齐
HTML 表格本身不区分数字或文本，右对齐靠 CSS 控制。直接给 <td> 或 <code><th> 加 <code>style="text-align: right" 最快见效，但别只加在 <tr> 或 <code><table> 上——那样会把文字也右推，反而影响可读性。
<p>常见错误是给整列加 class 却忘了重置 <code><th> 的对齐方式，结果表头也右对齐，金额列看着像“倒着写”。建议单独控制数据单元格：
<pre class="brush:php;toolbar:false;"><td class="amount">$1,234.56</td></pre>
<p>对应 CSS 写成：</p>
<pre class="brush:php;toolbar:false;">.amount { text-align: right; }</pre>
<h3>金额列用 <code>td[headers="amount"] 选择器更稳妥
当表格有多个金额列（比如“应收”“实收”“税额”），用 class 容易漏加或误加。改用语义化方式：先给 <th> 设 <code>id，再用 headers 属性关联 <td>，CSS 就能精准命中：
<pre class="brush:php;toolbar:false;"><th id="amount">金额</th><br><td headers="amount">¥8,900.00</td></pre>
<p>然后写：</p>
<pre class="brush:php;toolbar:false;">td[headers="amount"] { text-align: right; }</pre>
<p>这样即使后续加新列、换顺序，样式也不会错位。注意 <code>headers 值必须和 th#id 完全一致，大小写敏感，空格也不行。
数字右对齐时小心小数点错位问题
纯 text-align: right 对齐的是字符末尾，不是小数点。如果金额格式不统一（比如有的带千分位逗号，有的不带；有的保留两位小数，有的整数），视觉上小数点会浮动，核对困难。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
解决办法只有两个：
- 后端或 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>，表头仍需单独处理；且它只作用于同列的 <code><td>，跨行合并单元格（<code>rowspan）会脱离列上下文，样式不继承。
小数点对齐这事，得从数据源头控格式，CSS 只负责“摆位置”。别等上线后才发现 ¥100 和 ¥1,000.00 的小数点不在一条竖线上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
