报表树定义是财务报表的核心构建基块，用于基于财务维度关系建立跨维层次结构，支持组织结构与汇总层级的灵活定义及多视角数据呈现。
table 嵌套结构容易导致语义混乱和屏幕阅读器失效
财务报表（如利润表、现金流量表）常含多级表头、跨行汇总、合并单元格，直接用 <colspan></colspan> 和 <rowspan></rowspan> 堆叠会导致结构不可读。浏览器解析时可能丢弃部分 <th> 的 <code>scope 属性，辅助技术无法正确关联数据单元格与对应表头。
正确做法是分层构建：外层 <table> 仅承载主维度（如“项目”“本期金额”“上期金额”），子表用 <code><details></details> + <summary></summary> 折叠明细项，避免嵌套 <table>。若必须展开子项（如“营业成本”下分“原材料”“人工”“制造费用”），优先用 <code><tbody> 分组并添加 <code>aria-label：
<tbody aria-label="营业成本明细"> <tr> <td>原材料</td> <td>12,500.00</td> <td>11,800.00</td> </tr> <tr> <td>人工</td> <td>8,200.00</td> <td>7,950.00</td> </tr> </tbody>
固定表头滚动时 position: sticky 在 Safari 中不兼容 <thead><p>Safari 对 <code><thead> 的 <code>position: sticky 支持不稳定，尤其在缩放或高DPI屏下会错位。不要依赖 <thead> 自身设 <code>top: 0，而应把表头单独抽成一个与主体 <table> 并列的 <code><div>，用 JavaScript 同步滚动位置。
<p>更稳妥的 CSS 方案：</p>
<ul><li>给 <code><table> 外层容器设 <code>overflow-y: auto 和固定高度
<thead> 移出 <code><table>，改为独立 <code><div class="table-header">，样式设 <code>position: sticky; top: 0; z-index: 1
<th> 宽度与下方 <code><td> 严格一致（用 <code>width 或 min-width 统一控制）
数字对齐和千分位处理必须由 CSS 控制，而非字符串拼接
后端传来的数字若已加逗号（如 "1,234,567.89"），CSS 的 text-align: right 会因逗号宽度不均导致视觉错位；若前端用 toLocaleString() 格式化，又可能因 locale 差异造成小数点/千分位符号错误（如德语用点作小数点）。
推荐方案：
- 后端返回纯数字（
1234567.89），前端用Intl.NumberFormat格式化，显式指定useGrouping: true和minimumFractionDigits: 2 - CSS 中对数值列统一设
text-align: right; font-variant-numeric: tabular-nums—— 后者强制等宽数字，避免“1”和“0”宽度差异影响对齐 - 负数统一用括号包裹（如
(123.45)），而非减号，避免减号被误读为运算符
导出 Excel 时 <table> 的 <code>border-collapse 会影响单元格边框渲染
用 SheetJS 或类似库将 HTML 表转 Excel 时，border-collapse: collapse 会导致 Excel 中相邻单元格边框合并，丢失财务报表所需的清晰分隔线；而 separate 又会让边框重复加粗。
导出前临时重置样式：
- 克隆原
<table>，移除所有 <code>style属性 - 为克隆表设置
border: 1px solid #000到每个<th> 和 <code><td>，禁用 <code>border-collapse - 隐藏不需要导出的元素（如折叠按钮、操作列）用
display: none，而非visibility: hidden（后者仍占用导出空间）
复杂报表真正难的不是画表格，而是让每一行数字在放大、缩放、打印、读屏、导出时都保持可解释性。多数问题出在试图用视觉样式替代语义结构——先想清楚“谁要读它？在什么场景下读？”，再决定怎么写 <table>。</table>
