财务核对单需用<thead><tbody>语义化分层确保表头冻结与无障碍访问，border-collapse: collapse统一边框，等宽字体+预格式化实现小数点对齐，@media print控制打印分页与页脚。
表格结构必须用 <thead> + <tbody> 显式分离，不能靠 CSS 模拟表头冻结
财务核对单常需滚动查看大量数据，但表头必须始终可见。仅靠 position: sticky 在部分浏览器（如旧版 Safari、IE）下失效，且当 <table> 外层有 overflow 时行为不可靠。真正稳定的方案是强制语义化分层：
- 第一行必须包裹在
<thead>内，且只放<th>；<tbody>从第二行起承载全部数据行 - 避免把表头写成
<tr><td>序号</td><td>凭证号</td></tr>—— 这会让屏幕阅读器和 Excel 导出丢失结构语义 - 若需“合并表头”（如“本期发生额”跨“借方”“贷方”两列），用
colspan，但必须确保<thead>内所有<tr>的单元格总数一致，否则 tbody 行会错位
border-collapse: collapse 是底线，border 必须设在 <th> 和 <td> 上，而非 <table>
审计单要求线条清晰、无歧义，尤其“借贷平衡线”“合计横线”需精准控制粗细与位置。直接给 <table> 设 border 会导致双线叠加、内外边距混乱：
- 先全局启用
border-collapse: collapse，消除默认间距 - 表头底部加
border-bottom: 2px solid #000，区分栏目与数据区 - 每行末尾的“余额”列右侧加
border-right: 1px dashed #999，标示校验边界 - 合计行用
border-top: 2px solid #000，且该行<td>的border-bottom设为none，避免三线重叠
金额数字右对齐 + 千分位 + 小数点对齐，纯 CSS 无法实现小数点对齐
财务数据肉眼比对依赖小数点纵向对齐，但 CSS 的 text-align: right 只能按字符右端对齐，数字位数不一时会错位。必须用等宽字体 + 预处理格式化：
- 字体强制用
font-family: 'Consolas', 'Courier New', monospace，禁用比例字体 - 服务端或 JS 生成 HTML 前，将数字统一格式化为固定宽度字符串：例如
12345.67→"12,345.67"，-89.1→" -89.10"（补空格，非 ） - 再配合
white-space: pre保留空格，让小数点垂直对齐 - 切勿用
tab或多个
打印时表头重复、页脚标注、分页控制必须用 @media print 单独声明
审计人员常导出 PDF 或直接打印，浏览器默认打印会截断表头、忽略页脚，且可能在金额中间分页。这些无法靠前端框架自动解决：
立即学习“前端免费学习笔记（深入）”；
- 在
@media print中重置thead { display: table-header-group }（部分浏览器需此显式声明） - 每页底部加审计说明：用
:after伪元素在<body>上输出content: "核对人：________ 日期：____/____/____" - 禁止在金额行中间断页：
tr { page-break-inside: avoid }，但需注意：若某行过高（如含多行备注），仍可能溢出，此时应在后端拆分数据 - 打印前务必测试：Chrome 的“打印预览” > “更多设置” > 关闭“背景图形”，否则浅灰底色会吃墨
真正的难点不在写几行 CSS，而在于业务规则如何映射到 HTML 结构——比如“未勾稽项用红色底纹”，这个颜色不能写死，得由后端根据勾稽状态字段动态加 class；一旦漏掉状态判断，整张表的审计效力就归零。
