金额右对齐必须用 text-align: right；小数点对齐需等宽字体+右对齐或统一格式化；表头固定需外层div包裹+thead sticky；千分位和负数应使用 Intl.NumberFormat 格式化。
金额右对齐必须用 text-align: right，别信“自动靠右”
HTML 表格单元格默认左对齐，数字（尤其是金额）不手动设置会显得杂乱、难比对。CSS 的 text-align: right 是唯一可靠方式，align="right" 这种旧属性在现代项目中容易被重置或忽略，尤其在使用 Bootstrap 或 Tailwind 时几乎失效。
常见错误是只给 <td> 加样式，结果小数点错位——因为不同金额位数不同（如 123.45 和 12345.67），纯右对齐仍会浮动。真正对齐小数点，得用等宽字体 + 右对齐，或更稳妥的方案：统一格式化为固定小数位再右对齐。
- 金额列务必加 class，比如
<td class="amount">1234.56</td> - CSS 中写
.amount { text-align: right; font-family: 'Consolas', 'Courier New', monospace; } - 避免在
<table>上全局设text-align: right，否则表头文字也会右偏
边框合并用 border-collapse: collapse，否则双线难看
默认表格边框是“分离模式”，<td> 和 <th> 各自画边，相邻单元格之间出现双线，财务表里这种重复边框会干扰数据阅读。必须显式声明 border-collapse: collapse，让内外边框真正合并成单线。
注意：这个属性要作用在 <table> 元素上，不是 <tr> 或 <td>。另外，如果用了 border-spacing（比如想留白），它和 collapse 冲突，必须设为 0。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
<table style="border-collapse: collapse; border-spacing: 0;"> - 边框粗细建议用
1px solid #ddd，太粗（如2px）会让小字号金额显得拥挤 - 表头
<th>边框颜色可略深（如#999），和内容行形成视觉区分
表头固定+内容滚动需包裹容器，别直接对 <table> 设 height
财务明细常有几十行，用户需要滚动查看但又不想丢失表头。直接给 <table> 设 max-height 并加 overflow-y: auto 不行——<thead> 会跟着滚动走。正确做法是用外层 <div> 包住整个表格，并限制其高度和溢出行为。
同时，<thead> 必须用 position: sticky 锁定，且 top: 0 才能随滚动保持可见。这要求父容器不能是 overflow: hidden，否则 sticky 失效。
- 结构示例：
<div style="max-height: 400px; overflow-y: auto;"><table>...</table></div> -
<th>样式加：position: sticky; top: 0; background: white; z-index: 1; - 若兼容 IE，此方案不可用，得改用两个表格（一个只放
<thead>，一个放<tbody>）
金额千分位和负数显示别靠 JS 拼接，用 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 对象
