HTML表格打印问题根源在于table不响应分页属性，正确方案是拆分为多个带独立thead的table并用page-break-before分页，配合@media print样式重置。
HTML表格打印时内容被截断、表头不重复、跨页错乱——不是浏览器 bug，而是没用对分页机制。核心问题在于：table 元素本身不响应 page-break-inside: avoid，也不能靠 tbody 分组自动触发表头复现。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
为什么给 <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里必须重置的三类样式打印预览和屏幕渲染走两套样式逻辑，很多“看着正常”的页面一打印就错位，往往是因为没覆盖默认值。
立即学习“前端免费学习笔记（深入）”；
- 清除干扰边距：
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控制列宽，而不是靠内容撑开
- 清除干扰边距：
