HTML表格打印问题根源在于table不响应分页属性，正确方案是拆分为多个带独立thead的table并用page-break-before分页，配合@media print样式重置。

HTML表格打印时内容被截断、表头不重复、跨页错乱——不是浏览器 bug，而是没用对分页机制。核心问题在于：table 元素本身不响应 page-break-inside: avoid，也不能靠 tbody 分组自动触发表头复现。

为什么给 <tr> 加 <code>page-break-inside: avoid 没用

规范明确禁止在 <tr> 上使用 <code>page-break-inside，现代浏览器会直接忽略。即使加了，表格仍可能整页溢出或留大片空白。真正起作用的是容器级控制或结构拆分。

• <table> 是原子单元，浏览器要么整张表塞进一页，要么整体挪到下一页<li> <code>page-break-inside: avoid 只对块级容器（如 <div>）有效，且需配合 <code>display: block（但会破坏表格语义）
• 想“精细控制断点”，必须放弃单表思路，改用多表 + <thead> 复用<h3>用 <code><thead> + 多 <code><table> 实现跨页表头重复<p>这是目前最稳定、兼容性最好的方案。关键不是“让一张表分页”，而是“把一张表切成多张语义完整的表”，每张都带自己的 <code><thead>，再用分页符隔开。<ul><li>每页数据单独包裹为一个 <code><table>，每个都包含完整 <code><thead> 和对应 <code><tbody><li>在两个 <code><table> 之间插入：<code><div style="page-break-before: always;"></div>（注意：必须写在 @media print 块内才生效）
• <thead> 必须保留默认 <code>display: table-header-group，不要覆盖它，否则只在第一页显示
• 避免用 flex/grid 包裹这些 <table>，它们会拦截分页指令；外层用纯 <code><div> 流式布局<h3> <code>@media print 里必须重置的三类样式

打印预览和屏幕渲染走两套样式逻辑，很多“看着正常”的页面一打印就错位，往往是因为没覆盖默认值。

Wechat Article Html

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

下载

• 清除干扰边距：body, html { margin: 0; padding: 0; }，否则和 @page { margin: 2cm } 叠加出意外空白
• 禁用背景：* { background: transparent !important; }，防止打印机卡纸或墨水浪费
• 隐藏非打印元素：.no-print { display: none !important; }，加 !important 是为了压过框架自带样式

调试时容易忽略的细节

打印样式不像屏幕样式能实时刷新，很多坑要靠预览+PDF导出交叉验证。

• <div style="page-break-before: always;"> 必须是空元素，不能设 <code>margin/padding/background，否则可能撑高导致分页失效
• 不要依赖浏览器“打印预览”里的缩放比例判断内容是否溢出——它只是模拟，实际 PDF 导出或物理打印可能不同
• 如果表格列宽不稳定，打印时列挤压变形，优先用 table-layout: fixed + 显式 width 控制列宽，而不是靠内容撑开