不推荐用<table>做发票模板布局，因其维护成本高、响应式差、打印易崩，且难以支持动态行数、跨页分页、水印、二维码等现代需求；应采用语义化HTML+CSS Grid/Flex布局，表格仅用于明细数据，其他区域用<div>实现，并通过@media print优化打印样式，最终交付以PDF生成库为主。
不推荐用 <table> 做发票模板的布局 —— 它不是语义错误，而是维护成本高、响应式难、打印样式易崩，且现代发票常需动态行数、跨页分页、水印、二维码等，<table> 原生能力根本扛不住。
为什么发票模板别硬套 <table> 布局
发票是结构化数据 + 固定视觉区块（抬头、明细、合计、签章），但关键点在于：明细行数不确定、合计位置必须贴底、打印时要跨页断行、PDF导出需精确控制。而 <table> 的 border、cellpadding、colspan 等属性在打印预览中表现极不稳定；thead/tbody 分组对跨页无效；page-break-inside: avoid 在表格行上基本失效。
-
border="1"或bordercolor="#000"是过时写法，CSS 才可控 -
width="100%"和height="800px"混用会导致打印时内容被截断 - 用
rowspan合并“备注”单元格，在动态插入行后极易错位 - 浏览器打印时，
<table>不会自动把<tfoot>锁在页尾，合计栏可能飘到下一页开头
真正在用的发票模板实现方式
主流方案是「语义化 HTML + CSS Grid/Flex 布局 + 打印专用样式」，表格只用于明细数据本身（即 <table> 仅包裹 <tr><td> 明细行），其他区域全部用 <div> 布局。
- 抬头区、公司信息、开票日期：用
<header>+ Flex 横向对齐 - 明细部分：保留
<table class="invoice-items">，但仅设border-collapse: collapse和最小必要边框 - 合计栏：用
<footer>+margin-top: auto（配合 Flex column）或绝对定位 +page-break-before: avoid - 签章区：固定高度容器 +
background-image水印 +text-align: right - 打印样式单独写
@media print，重置所有box-shadow、color、font-size，强制color: #000、background: transparent
如果非要用 <table> 快速出个静态发票样稿
仅限内部草稿或无打印需求的展示页，必须满足三个硬约束：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 明细行数写死（比如最多 10 行），否则
rowspan和height无法预估 - 用
<colgroup>控制列宽（如<col width="80"><col width="200">），别依赖td { width: } - 合计栏必须放在
<tfoot>里，并加style="page-break-inside: avoid;"（虽然不保准，但比没强） - 禁用
cellspacing和cellpadding，改用 CSS：table { border-collapse: collapse; }+td, th { padding: 4px 6px; }
示例片段：
<table class="invoice" style="width: 100%; border-collapse: collapse;">
<colgroup>
<col width="60">
<col width="220">
<col width="80">
<col width="80">
<col width="80">
</colgroup>
<thead>
<tr><th colspan="5">增值税专用发票</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>服务器托管服务</td><td>12个月</td><td>¥120,000.00</td><td>¥120,000.00</td></tr>
</tbody>
<tfoot style="page-break-inside: avoid;">
<tr><td colspan="3"></td><td>合计金额</td><td>¥120,000.00</td></tr>
</tfoot>
</table>
真正上线的发票系统，99% 都用 PDF 生成库（如 jsPDF + autoTable，或后端 iText/PDFKit）来输出——HTML 只做预览，PDF 才是交付物。表格标签在这里只负责提供原始数据结构，布局和分页全由 PDF 库接管。
