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