财务对账单必须用 thead 多行分层，严格通过 colspan/rowspan 保证语义与结构正确，禁用 div 模拟；数字对齐须用 font-variant-numeric: tabular-nums；固定表头应移出 table 用独立 sticky div 实现。
财务对账单必须用 thead 分层，不能靠 CSS 模拟
财务对账单不是普通表格，它要求屏幕阅读器能准确读出“2024年6月”对应哪几列、“银行流水”和“账面余额”是平行关系还是父子关系。用 div + display: table-cell 会丢失语义，导出 Excel 时合并失效，打印分页也错乱。
正确做法是严格用 thead 套多行 tr，每行 th 的 colspan 和 rowspan 必须满足：所有行的单元格总数一致，且第一行总列数 = 后续每行 th 的 colspan 值之和。
- 示例结构中，“日期”列固定为 1 列，“银行流水”下分“收入”“支出”“余额”，所以第二层
th中“银行流水”需colspan="3" - “账面余额”若需与“银行流水”并列，则同级设
colspan="1"，不能靠空td占位 - 浏览器开发者工具里检查
table.rows[0].cells.length和table.rows[1].cells.length，两者必须相等
rowspan 跨行合并时，后续行必须跳过对应位置
比如“期初余额”要纵向覆盖“银行流水”“账面余额”两行，就得设 rowspan="2"，然后在第二行 tr 中，这两个位置不能再放 th 或 td——否则浏览器会自动补空单元格，DOM 已损坏，辅助技术无法关联数据。
常见错误是写完第一行就忘了删后续行里的占位单元格，结果页面看着对齐，但导出 Excel 时“期初余额”只出现在第一行，第二行凭空多出一列。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 真实财报中，“主营业务成本”常
rowspan="4"，对应下方“原材料”“人工”“制造费用”“折旧”四行，那么这四行的首列都必须留空 - 用 JavaScript 动态生成时，别在循环里硬塞
td，先算好哪些位置该跳过，再拼字符串或插入节点 - 检查方法：右键 → “检查元素”，看第二行
tr的子元素数量是否比第一行少对应rowspan值
数字列对齐必须用 font-variant-numeric: tabular-nums
财务对账单最怕数字错位。“1,234.56”和“98.7”右边不对齐，不是因为没设 text-align: right，而是因为“1”比“0”窄、“,”占额外宽度。CSS 的 tabular-nums 强制所有数字等宽，这才是真正可靠的对齐方式。
后端返回的数字必须是纯数值（如 1234.56），前端用 Intl.NumberFormat 格式化，禁用后端传带逗号的字符串——locale 差异会导致德语环境输出 1.234,56，小数点变成逗号，直接破坏语义。
- 负数统一用括号：
(123.45)，而不是-123.45，避免减号被误读为运算符或影响千分位解析 - 样式必须写在
td或th上，不能只写在table上——否则表头文字也会被强制等宽数字，中文显示异常 - 测试时缩放页面到 125%，确认小数点仍垂直对齐；Safari 高 DPI 屏下尤其容易暴露问题
固定表头滚动慎用 <thead> 的 <code>position: sticky
Safari 对 <thead> 的 <code>position: sticky 支持不稳定，缩放或高分辨率屏下表头会偏移、重复渲染，甚至遮挡数据行。这不是 bug，是规范未强制要求浏览器支持 <thead> 的 sticky 行为。
<p>稳妥方案是把 <code><thead> 移出 <code><table>，用一个独立 <code><div class="table-header"> 承载，并通过 JS 同步滚动位置，或用 CSS 配合容器高度控制：
<ul>
<li>外层容器设 <code>overflow-y: auto; height: 400px
<div class="table-header"> 设 <code>position: sticky; top: 0; z-index: 1
<th> 的 <code>width 或 min-width 与下方 <td> 完全一致，否则 sticky 后列宽错位
<p>真正麻烦的不是写法，而是每次改列宽都要同步更新 header 和 body 两处——漏掉任意一处，对账单就失去可信度。</p>
</td>
