财务核对单需用语义化分层确保表头冻结与无障碍访问，border-collapse: collapse统一边框，等宽字体+预格式化实现小数点对齐，@media print控制打印分页与页脚。

表格结构必须用 + 显式分离，不能靠 CSS 模拟表头冻结

财务核对单常需滚动查看大量数据，但表头必须始终可见。仅靠 position: sticky 在部分浏览器（如旧版 Safari、IE）下失效，且当

外层有 overflow 时行为不可靠。真正稳定的方案是强制语义化分层：

• 第一行必须包裹在

内，且只放 从第二行起承载全部数据行

避免把表头写成

—— 这会让屏幕阅读器和 Excel 导出丢失结构语义

若需“合并表头”（如“本期发生额”跨“借方”“贷方”两列），用 colspan，但必须确保

内所有 的单元格总数一致，否则 tbody 行会错位

border-collapse: collapse 是底线，border 必须设在

；

序号

凭证号

和

上，而非

审计单要求线条清晰、无歧义，尤其“借贷平衡线”“合计横线”需精准控制粗细与位置。直接给

设 border 会导致双线叠加、内外边距混乱：

• 先全局启用 border-collapse: collapse，消除默认间距
• 表头底部加 border-bottom: 2px solid #000，区分栏目与数据区
• 每行末尾的“余额”列右侧加 border-right: 1px dashed #999，标示校验边界
• 合计行用 border-top: 2px solid #000，且该行

的 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 或直接打印，浏览器默认打印会截断表头、忽略页脚，且可能在金额中间分页。这些无法靠前端框架自动解决：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 在 @media print 中重置 thead { display: table-header-group }（部分浏览器需此显式声明）
• 每页底部加审计说明：用 :after 伪元素在 上输出 content: "核对人：________ 日期：____/____/____"
• 禁止在金额行中间断页：tr { page-break-inside: avoid }，但需注意：若某行过高（如含多行备注），仍可能溢出，此时应在后端拆分数据
• 打印前务必测试：Chrome 的“打印预览” > “更多设置” > 关闭“背景图形”，否则浅灰底色会吃墨

真正的难点不在写几行 CSS，而在于业务规则如何映射到 HTML 结构——比如“未勾稽项用红色底纹”，这个颜色不能写死，得由后端根据勾稽状态字段动态加 class；一旦漏掉状态判断，整张表的审计效力就归零。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！