财务报表必须用单一标签实现语义化与兼容性。正确做法是外层定义主维度，明细用带aria-label的分组，折叠展开用包裹；colspan/rowspan须语义准确且值合法；金额右对齐需后端传数字、前端intl.numberformat格式化并配合tabular-nums等宽字体；safari中sticky失效，应拆出独立表头并js同步滚动。

财务报表必须用 <table>，但别嵌套子表 <p>直接用 <code><table> 是唯一兼顾语义、导出 Excel、屏幕阅读器和打印的方案。嵌套 <code><table> 看似直观，实则破坏表格结构层级，导致 Excel 导出时行列错乱、<code>scope 属性失效、辅助技术无法关联表头与数据单元格。

正确做法是分层表达：

• 外层 <table> 只承载主维度：如“项目”“本期金额”“上期金额”三列 <li>明细项（如“营业成本”下分“原材料”“人工”）用 <code><tbody> 分组，并加 <code>aria-label，例如 <tbody aria-label="营业成本明细"><li>需要折叠展开的，用 <code><details><summary></summary></details> 包裹整个 <tbody>，不破坏 DOM 表格结构 <h3> <code>colspan 和 rowspan 不是装饰，是语义刚需

它们不是为了“看起来像报表”，而是告诉机器：“2024年度”横跨 4 列、“净利润”纵跨“营业利润”和“所得税费用”两行——否则导出 Excel 或被屏幕阅读器读取时，会把合并逻辑丢失，变成孤立数字。

常见踩坑点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• colspan="0" 或小数（如 colspan="2.5"）直接无效，浏览器忽略或报错
• 某行 <th> 的 <code>colspan 值之和 ≠ 表定义列数（通常由第一行推算），浏览器会自动补 <td>，但 DOM 已损坏 <li>用 <code>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 上大概率失效 <p>Safari 对 <code><thead> 的 <code>position: sticky 支持极不稳定，尤其在缩放、高 DPI 屏或滚动加速时，表头会突然偏移甚至消失。

绕过方案是手动拆解：

• 把 <thead> 从 <code><table> 中完全移出，变成独立的 <code><div class="table-header"> <li><code><table> 外层容器设 <code>overflow-y: auto; height: 500px;
• .table-header 设 position: sticky; top: 0; z-index: 1;
• 关键：用 JavaScript 同步滚动位置（监听容器 scrollLeft 并赋给 .table-header），否则水平滚动时表头列宽会错位

最易被忽略的是 <th> 和下方 <code><td> 的宽度必须严格一致——靠 CSS 的 <code>width 或 min-width 统一控制，不能依赖内容撑开。