财务报表必须用单一<table>标签实现语义化与兼容性。正确做法是外层<table>定义主维度，明细用带aria-label的<tbody>分组，折叠展开用<details><summary>包裹<tbody>；colspan/rowspan须语义准确且值合法；金额右对齐需后端传数字、前端Intl.NumberFormat格式化并配合tabular-nums等宽字体；Safari中<thead>sticky失效，应拆出独立表头并JS同步滚动。
财务报表必须用 <table>，但别嵌套子表
直接用 <table> 是唯一兼顾语义、导出 Excel、屏幕阅读器和打印的方案。嵌套 <table> 看似直观，实则破坏表格结构层级，导致 Excel 导出时行列错乱、scope 属性失效、辅助技术无法关联表头与数据单元格。
正确做法是分层表达：
- 外层
<table>只承载主维度：如“项目”“本期金额”“上期金额”三列 - 明细项（如“营业成本”下分“原材料”“人工”）用
<tbody>分组，并加aria-label，例如<tbody aria-label="营业成本明细"> - 需要折叠展开的，用
<details><summary>包裹整个<tbody>，不破坏 DOM 表格结构
colspan 和 rowspan 不是装饰，是语义刚需
它们不是为了“看起来像报表”，而是告诉机器：“2024年度”横跨 4 列、“净利润”纵跨“营业利润”和“所得税费用”两行——否则导出 Excel 或被屏幕阅读器读取时，会把合并逻辑丢失，变成孤立数字。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
-
colspan="0"或小数（如colspan="2.5"）直接无效，浏览器忽略或报错 - 某行
<th>的colspan值之和 ≠ 表定义列数（通常由第一行推算），浏览器会自动补<td>，但 DOM 已损坏 - 用
display: table-cell+ CSS 模拟合并，打印时边框消失，aria-rowindex错乱
金额右对齐不能只靠 text-align: right
单纯设 text-align: right 在含千分位符号时会错位，因为 “1,234” 和 “987” 中逗号宽度不均；若后端已传带逗号字符串（如 "1,234,567.89"），CSS 对齐就不可靠。
可靠方案组合：
- 后端返回纯数字（如
1234567.89），前端用Intl.NumberFormat格式化，显式指定useGrouping: true和minimumFractionDigits: 2 - CSS 中金额列统一设：
text-align: right; font-variant-numeric: tabular-nums; - 搭配等宽字体声明，例如：
font-family: "SF Mono", "Fira Code", monospace; - 负数统一用前置
-（如-123.45），不用括号，避免被误读为运算符或影响tabular-nums生效范围
<thead> 的 sticky 在 Safari 上大概率失效
Safari 对 <thead> 的 position: sticky 支持极不稳定，尤其在缩放、高 DPI 屏或滚动加速时，表头会突然偏移甚至消失。
绕过方案是手动拆解：
- 把
<thead>从<table>中完全移出，变成独立的<div class="table-header"> -
<table>外层容器设overflow-y: auto; height: 500px; -
.table-header设position: sticky; top: 0; z-index: 1; - 关键：用 JavaScript 同步滚动位置（监听容器
scrollLeft并赋给.table-header），否则水平滚动时表头列宽会错位
最易被忽略的是 <th> 和下方 <td> 的宽度必须严格一致——靠 CSS 的 width 或 min-width 统一控制，不能依赖内容撑开。
