报表树定义是财务报表的核心构建基块，用于基于财务维度关系建立跨维层次结构，支持组织结构与汇总层级的灵活定义及多视角数据呈现。
table 嵌套结构容易导致语义混乱和屏幕阅读器失效
财务报表（如利润表、现金流量表）常含多级表头、跨行汇总、合并单元格，直接用 <colspan> 和 <rowspan> 堆叠会导致结构不可读。浏览器解析时可能丢弃部分 <th> 的 scope 属性，辅助技术无法正确关联数据单元格与对应表头。
正确做法是分层构建：外层 <table> 仅承载主维度（如“项目”“本期金额”“上期金额”），子表用 <details> + <summary> 折叠明细项，避免嵌套 <table>。若必须展开子项（如“营业成本”下分“原材料”“人工”“制造费用”），优先用 <tbody> 分组并添加 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>
Safari 对 <thead> 的 position: sticky 支持不稳定，尤其在缩放或高DPI屏下会错位。不要依赖 <thead> 自身设 top: 0，而应把表头单独抽成一个与主体 <table> 并列的 <div>，用 JavaScript 同步滚动位置。
更稳妥的 CSS 方案：
立即学习“前端免费学习笔记（深入）”；
- 给
<table>外层容器设overflow-y: auto和固定高度 -
<thead>移出<table>，改为独立<div class="table-header">，样式设position: sticky; top: 0; z-index: 1 - 确保
<th>宽度与下方<td>严格一致（用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> 的 border-collapse 会影响单元格边框渲染
用 SheetJS 或类似库将 HTML 表转 Excel 时，border-collapse: collapse 会导致 Excel 中相邻单元格边框合并，丢失财务报表所需的清晰分隔线；而 separate 又会让边框重复加粗。
导出前临时重置样式：
- 克隆原
<table>，移除所有style属性 - 为克隆表设置
border: 1px solid #000到每个<th>和<td>，禁用border-collapse - 隐藏不需要导出的元素（如折叠按钮、操作列）用
display: none，而非visibility: hidden（后者仍占用导出空间）
复杂报表真正难的不是画表格，而是让每一行数字在放大、缩放、打印、读屏、导出时都保持可解释性。多数问题出在试图用视觉样式替代语义结构——先想清楚“谁要读它？在什么场景下读？”，再决定怎么写 <table>。
