html表格结构必须用明确分离表头、数据与合计，电子发票依赖该语义化结构供税务系统识别字段；放开票信息，每行8列且金额右对齐+等宽字体+千分位，含amount/tax类单元格；须内联样式、禁用background-color、table-layout:fixed并确保col宽总和100%。
表格结构必须用 <thead> + <code><tbody> 明确分离表头与数据
<p>电子发票不是普通表格，税务系统或下游财务软件常依赖语义化结构识别“开票方”“金额”“税额”等字段。只用 <code><table> 套 <code><tr><td> 会导致导出 PDF 或 OCR 识别失败。
<p>正确做法是：开票信息（如销售方名称、税号）放 <code><thead>，商品明细放 <code><tbody>，合计行用 <code><tfoot> 包裹。部分财税接口会强制校验 <code><tfoot> 是否存在且含 <code>amount 和 tax 类名单元格。
<thead> 里避免合并单元格（<code>colspan），否则 PDF 渲染易错位
<tbody> 每行必须有 8 列：序号、商品名称、规格、单位、数量、单价、金额、税率（即使免税也填 <code>0%）
- 不要在
<tbody> 里插广告语、备注栏——这些该放在 <code><tfoot> 后独立 <code><p></p> 中
金额列必须右对齐 + 等宽字体 + 千分位分隔
财务系统读取 HTML 发票时，常通过 CSS 类名 + 文本格式反向校验数值合法性。左对齐或使用 font-family: sans-serif 可能被判定为“非标准格式”而拒收。
关键样式必须内联（不能靠外部 CSS），因为邮件客户端或打印预览常禁用外部样式：
<td style="text-align: right; font-family: 'Courier New', monospace; font-size: 12px;">¥1,234.56</td>
- 中文 ¥ 符号必须前置，不可用
¥ 或 Unicode \u00A5 —— 某些 ERP 系统只认字面 ¥
- 千分位用英文逗号
,，不用空格或点号；小数点后固定两位，100.00 不可简写为 100
- 税率列内容必须带
% 符号，且数值为数字字符串（如 13%），不可是 0.13 或 十三%
打印适配：用 @media print 隐藏非必要元素
用户点击“打印发票”时，浏览器默认会把导航栏、按钮、页脚广告全打出来。必须用 @media print 主动控制可见性，否则纸质版发票出现乱码或遮挡关键字段。
最简有效方案是给所有非表格元素加 class="no-print"，并在 <style></style> 中声明：
@media print { .no-print { display: none !important; } }
<table> 宽度设为 <code>width: 100%，但禁止用 max-width —— 打印引擎不识别该属性，会导致内容截断
- 边框必须用
border: 1px solid #000，不能用 border-color: black —— 某些打印机驱动将 black 渲染为灰阶，细线消失
- 禁止使用
background-color 填充单元格 —— 大部分打印机默认关闭背景图形打印，留白即漏信息
兼容性陷阱：IE11 和 Outlook 2016 仍需 table-layout: fixed
现代浏览器用 table-layout: auto 能自适应内容宽度，但 IE11 和 Outlook 2016（至今仍有大量企业邮箱在用）会把长商品名撑破整列，导致金额列错位到下一行。
唯一可靠解法是在 <table> 上硬编码列宽，并启用固定布局：
<pre class="brush:php;toolbar:false;"></pre>
<table style="table-layout: fixed; width: 100%;">
<col style="width: 5%;">
<col style="width: 30%;">
<col style="width: 15%;">
<col style="width: 8%;">
<col style="width: 8%;">
<col style="width: 12%;">
<col style="width: 12%;">
<col style="width: 10%;">
</table>
<ul>
<li>
<code><col> 的 width 必须用百分比，像素值在 Outlook 中失效
- 总和必须严格等于 100%，多 1% 或少 1% 都会导致最后一列被压缩或溢出
- 商品名称列（30%）要预留换行空间，不能靠
word-break: break-all —— 这会让税务识别把“笔记本电脑”拆成“笔记 本电 脑”，误判为多个商品
实际生成时，最易被忽略的是 <tfoot> 的结构合法性与 <code>table-layout: fixed 下的列宽总和。这两处出错，轻则打印偏移，重则被税务平台标记为“格式异常”。
<thead> 里避免合并单元格（<code>colspan），否则 PDF 渲染易错位
<tbody> 每行必须有 8 列：序号、商品名称、规格、单位、数量、单价、金额、税率（即使免税也填 <code>0%）
<tbody> 里插广告语、备注栏——这些该放在 <code><tfoot> 后独立 <code><p></p> 中
金额列必须右对齐 + 等宽字体 + 千分位分隔
财务系统读取 HTML 发票时，常通过 CSS 类名 + 文本格式反向校验数值合法性。左对齐或使用 font-family: sans-serif 可能被判定为“非标准格式”而拒收。
关键样式必须内联（不能靠外部 CSS），因为邮件客户端或打印预览常禁用外部样式：
<td style="text-align: right; font-family: 'Courier New', monospace; font-size: 12px;">¥1,234.56</td>
- 中文 ¥ 符号必须前置，不可用
¥或 Unicode\u00A5—— 某些 ERP 系统只认字面¥ - 千分位用英文逗号
,，不用空格或点号；小数点后固定两位，100.00不可简写为100 - 税率列内容必须带
%符号，且数值为数字字符串（如13%），不可是0.13或十三%
打印适配：用 @media print 隐藏非必要元素
用户点击“打印发票”时，浏览器默认会把导航栏、按钮、页脚广告全打出来。必须用 @media print 主动控制可见性，否则纸质版发票出现乱码或遮挡关键字段。
最简有效方案是给所有非表格元素加 class="no-print"，并在 <style></style> 中声明：
@media print { .no-print { display: none !important; } }
<table> 宽度设为 <code>width: 100%，但禁止用max-width—— 打印引擎不识别该属性，会导致内容截断- 边框必须用
border: 1px solid #000，不能用border-color: black—— 某些打印机驱动将black渲染为灰阶，细线消失 - 禁止使用
background-color填充单元格 —— 大部分打印机默认关闭背景图形打印，留白即漏信息
兼容性陷阱：IE11 和 Outlook 2016 仍需 table-layout: fixed
现代浏览器用 table-layout: auto 能自适应内容宽度，但 IE11 和 Outlook 2016（至今仍有大量企业邮箱在用）会把长商品名撑破整列，导致金额列错位到下一行。
唯一可靠解法是在 <table> 上硬编码列宽，并启用固定布局：
<pre class="brush:php;toolbar:false;"></pre>
<table style="table-layout: fixed; width: 100%;">
<col style="width: 5%;">
<col style="width: 30%;">
<col style="width: 15%;">
<col style="width: 8%;">
<col style="width: 8%;">
<col style="width: 12%;">
<col style="width: 12%;">
<col style="width: 10%;">
</table>
<ul>
<li>
<code><col> 的 width 必须用百分比，像素值在 Outlook 中失效
word-break: break-all —— 这会让税务识别把“笔记本电脑”拆成“笔记 本电 脑”，误判为多个商品前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
