发票表格必须用而非div布局，因其列宽控制、跨行对齐和pdf打印更稳定；需用语义化结构，金额列右对齐加white-space: nowrap，禁用嵌套table与伪元素，谨慎使用rowspan/colspan，并通过@media print优化分页与隐藏非必要元素。
发票表格结构必须用 <table> 而不是 div 布局<p>浏览器对 <code><table> 的列宽控制、跨行对齐和打印支持更稳定，尤其在 PDF 导出（如 Chrome 打印预览）时，<code><div> + CSS Grid/Flex 容易错位或分页断裂。发票核心是行列语义明确：项目名称、数量、单价、金额必须严格对齐，<code><table> 天然满足。<p>实操建议：</p>
<ul><li>用 <code><thead> 固定表头（公司信息、发票标题、客户信息），避免打印时重复出现冗余内容<li><code><tbody> 放明细项，每行一个商品，用 <code><tr> + <code><td> 保证垂直对齐<li>合计栏必须用 <code><tfoot>，部分打印机和 PDF 工具会识别该语义并自动置底<li>避免嵌套 <code><table>——比如在某个 <code><td> 里再套表格，这会导致打印缩放异常<h3>金额列右对齐且保留两位小数，用 <code>text-align: right 和 white-space: nowrap
金额数字右对齐是财务规范，但单纯用 text-align: right 在窄列下可能被换行截断（如 “¥12,345.67” 拆成两行），导致阅读困难。
实操建议：
- 给金额列的
<td> 或 <code><th> 加 <code>style="text-align: right; white-space: nowrap;" - 数字本身用 JavaScript 格式化后写入 HTML（如
amount.toFixed(2)），不要依赖 CSS 或 locale 格式化，避免服务端渲染与客户端显示不一致 - 货币符号统一前置（如
¥12,345.67），不要用content: "¥"伪元素——打印时不渲染 - 列宽设为
width: 120px这类固定值，防止内容撑开整表 - 地址、公司名等长文本需跨列，用
colspan="4"（根据实际列数调整），不要靠 padding 或 margin 撑开 - 签名栏三列并排，用
<td colspan="1">开票人</td> <td colspan="1">复核人</td> <td colspan="1">收款人</td>，而非display: table-cell+ width 百分比 -
rowspan值必须精确匹配后续行数，例如备注占 3 行明细，则rowspan="3"，否则表格结构塌陷 - 避免
rowspan和colspan同时出现在同一单元格——极难调试，且某些旧版 IE 渲染异常 - 加
<style>@media print { .no-print { display: none; } }</style>，给按钮、侧边栏加class="no-print" - 给每条明细
<tr> 加 <code>style="page-break-inside: avoid;"，防止金额行和商品名被撕开 - 表头
<thead> 加 <code>style="display: table-header-group;"，确保每页都显示抬头 - 禁用背景色：
@media print { * { background: transparent !important; } }，否则黑白打印机吃墨严重
合并单元格要谨慎：仅用 rowspan 和 colspan，不用 CSS display: table-cell
发票里常见“备注”栏跨多行、“开票人/复核人/收款人”横向并列，容易误用 CSS 模拟合并，结果在打印时失效或错位。
实操建议：
打印适配关键：用 @media print 隐藏非必要元素，设置 page-break-inside: avoid
网页直接打印发票时，默认会把导航栏、按钮、背景图全打出来，且明细行可能被分页切断，造成财务凭证无效。
实操建议：
发票模板的麻烦点不在画布，而在打印那一刻——所有样式必须经得起 Chrome/Firefox 的“打印预览”检验，而不是仅看浏览器页面效果。
