制作财务报表密集表格的关键是结构准确、对齐稳定、语义清晰，须用原生table/th/td构建，配合等宽字体、Intl.NumberFormat格式化金额，collapse边框并sticky表头实现专业可访问的密集呈现。
制作财务报表样式的密集表格，关键不在“塞得满”，而在“结构准、对齐稳、语义清”。它需要严格遵循 HTML 表格规范，同时用 CSS 控制视觉密度与专业对齐，而不是靠强行压缩或隐藏边框来制造“密集感”。
用 table + tr + td/th 构建语义化骨架
财务报表必须用原生表格标签，不能用 div 模拟。表头用 <th>，数据用 <td>，每行 <tr> 内单元格总数必须一致（可通过第一行推算列数）。避免使用 table[role="presentation"]，否则屏幕阅读器无法识别行列关系，违反可访问性要求。
- 表头层级复杂时，用
colspan和rowspan显式表达合并逻辑（如“2024年度”横跨4列、“净利润”纵跨2行），不能靠 CSS 视觉模拟 - 禁止在
<thead>中用rowspan跨到<tbody>—— HTML 规范不支持，导出 Excel 会错位 - 动态生成时，先画草图标清每行逻辑单元格数，再反推哪些位置需合并，避免 DOM 结构损坏
让金额列真正“竖成一线”
单纯 text-align: right 会让小数点上下错位——因为默认字体中 “1” 比 “0” 窄，“.” 宽度也不固定。密集表格里这种错位会被放大，核对极易出错。
- 金额单元格加 class（如
<td class="amount">1234.56</td>），CSS 设：font-family: "SFMono-Regular", Consolas, monospace;+text-align: right; - 所有数字必须由
Intl.NumberFormat格式化：补足两位小数、自动千分位、负数转括号形式（(123.45)），禁用后端传带逗号字符串 - 货币符号（¥）和单位（万元）不要混在数字里，应分离放置，避免干扰等宽对齐
收紧边框与间距，实现视觉“密集感”
密集 ≠ 拥挤。核心是消除冗余间隙，保持呼吸感。
立即学习“前端免费学习笔记（深入）”；
-
<table>必须设border-collapse: collapse;，并显式写border-spacing: 0;，否则默认双线边框严重干扰数据视线 - 边框统一用
1px solid #ddd，太粗（如 2px）会让小字号金额显得压迫；表头背景设为white，配合position: sticky实现滚动固定 - 外层用
<div style="max-height: 400px; overflow-y: auto;">包裹整个<table>，<th>加position: sticky; top: 0; z-index: 1;—— 直接给 table 设 overflow 会导致表头滚动消失，尤其 Safari 下极不稳定
响应式与兼容性兜底
移动端窄屏下，密集表格容易横向溢出或文字折行，需主动控制。
-
<table>加table-layout: fixed;，配合<col>设置列宽（比在<td>上写 width 更稳定） - 小屏启用
overflow-x: auto，但父容器不能设overflow: hidden，否则sticky失效 - IE8 等老浏览器不支持
<col>的text-align，需退回到给每个<td class="numeric">单独加样式
