金额右对齐必须用 text-align: right；小数点对齐需等宽字体+右对齐或统一格式化；表头固定需外层div包裹+thead sticky；千分位和负数应使用 intl.numberformat 格式化。
金额右对齐必须用 text-align: right，别信“自动靠右”
HTML 表格单元格默认左对齐，数字（尤其是金额）不手动设置会显得杂乱、难比对。CSS 的 text-align: right 是唯一可靠方式，align="right" 这种旧属性在现代项目中容易被重置或忽略，尤其在使用 Bootstrap 或 Tailwind 时几乎失效。
常见错误是只给 <td> 加样式，结果小数点错位——因为不同金额位数不同（如 <code>123.45 和 12345.67），纯右对齐仍会浮动。真正对齐小数点，得用等宽字体 + 右对齐，或更稳妥的方案：统一格式化为固定小数位再右对齐。
- 金额列务必加 class，比如
<td class="amount">1234.56</td> - CSS 中写
.amount { text-align: right; font-family: 'Consolas', 'Courier New', monospace; } - 避免在
<table> 上全局设 <code>text-align: right，否则表头文字也会右偏边框合并用
border-collapse: collapse，否则双线难看默认表格边框是“分离模式”，
<td> 和 <code><th> 各自画边，相邻单元格之间出现双线，财务表里这种重复边框会干扰数据阅读。必须显式声明 <code>border-collapse: collapse，让内外边框真正合并成单线。注意：这个属性要作用在
<table> 元素上，不是 <code><tr> 或 <code><td>。另外，如果用了 <code>border-spacing（比如想留白），它和collapse冲突，必须设为0。- 写法示例：
<table style="border-collapse: collapse; border-spacing: 0;"> <li>边框粗细建议用 <code>1px solid #ddd，太粗（如2px）会让小字号金额显得拥挤 - 表头
<th> 边框颜色可略深（如 <code>#999），和内容行形成视觉区分表头固定+内容滚动需包裹容器，别直接对
<table> 设 <code>height财务明细常有几十行，用户需要滚动查看但又不想丢失表头。直接给
<table> 设 <code>max-height并加overflow-y: auto不行——<thead> 会跟着滚动走。正确做法是用外层 <code><div> 包住整个表格，并限制其高度和溢出行为。 <p>同时，<code><thead> 必须用 <code>position: sticky锁定，且top: 0才能随滚动保持可见。这要求父容器不能是overflow: hidden，否则 sticky 失效。- 结构示例：
<div style="max-height: 400px; overflow-y: auto;"><table>...</table></div> <th> 样式加：<code>position: sticky; top: 0; background: white; z-index: 1;- 若兼容 IE，此方案不可用，得改用两个表格（一个只放
<thead>，一个放 <code><tbody>） <h3>金额千分位和负数显示别靠 JS 拼接，用 <code>Intl.NumberFormat手动拼逗号（如
num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")）容易出错：负号位置错、小数位截断、国际化支持差。浏览器原生Intl.NumberFormat能自动处理符号、分组符、小数位、货币符号，且性能好、无依赖。财务场景下推荐固定小数位（通常两位），并明确指定 locale（如
'zh-CN'用“,”分千，用“.”作小数点；'en-US'同样逻辑但符号习惯不同）。- 格式化函数示例：
new Intl.NumberFormat('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(1234567.89)→"1,234,567.89" - 负数会自动显示为
"-123.45"，无需额外判断 - 避免在循环里反复创建
Intl.NumberFormat实例，应复用 formatter 对象
- 格式化函数示例：
- 结构示例：
- 写法示例：
