网页打印样式设计：报表跨页时保留表头、范围与合计

网页打印样式设计的起点不是“把屏幕页面缩小到 A4”，而是重新定义纸面任务。报表需要保留指标、筛选条件和时间；合同需要保留条款层级、签署信息和页码；评审记录需要保留问题、负责人和状态。交互按钮、悬浮提示和大面积导航在纸面上没有作用，应该通过打印样式隐藏或替换。

先确认纸面交付要回答什么

在画打印版之前，写出纸张使用者要完成的动作：阅读、签字、复核、归档还是现场讨论。不同动作决定纵向/横向方向、字号、信息密度和页眉内容。A4 纵向适合条款和单列清单，横向更适合宽表格；不要为了放下更多列而无限缩小字体，先决定哪些列是核心、哪些可以移到附录。

可以在 Pixso 中并列评审屏幕版与打印版，但要把两个状态作为不同交付物。打印版不应继承屏幕的 hover、展开和滚动假设。若最终交付是 PDF，还要与从 Pixso 导出 PDF的流程区分：网页打印要额外确认浏览器分页、数据范围和纸张设置。

建立打印版的信息层级

建议将纸面信息分成四层：文档标题与版本、当前筛选条件、核心内容、来源与页码。标题告诉读者这是什么，筛选条件回答数据从哪里来，核心内容承载任务，来源和页码让纸张可以被复核和归档。打印版中可以把“刷新”“复制链接”“展开详情”等交互动作改成文本说明或直接移除。

用 @page 和边界规则控制页面

CSS 的 @page 规则用于纸张尺寸、方向和页边距，但不同浏览器和打印机仍可能有差异。设计交付时应说明目标纸张、方向、边距和是否允许用户调整缩放，而不是只给一段代码。屏幕上的固定定位元素在打印上下文中可能变成遮挡层，页眉页脚最好使用适合分页上下文的结构。

卡片、提示框和表格行应尽量避免在语义中间拆开。break-inside 可以表达“尽量不要在此处断开”的意图，但内容过长时浏览器仍可能分页。真正的验收要在目标浏览器中打印预览，并检查标题、编号和上下文是否保留。

表格与卡片怎样跨页

表格最常见的问题是第二页没有表头、第一行被截成两半，或者合计行与数据分离。设计上应定义表头重复、行的最小完整单位、合计规则和横向溢出策略。对卡片列表，优先让一个卡片在同一页完成；若卡片很长，给出可接受的断点，并确保标题和关键数值不落在上一页末尾。

月度销售报表可以先定一条明确规则：每页保留“日期、项目、状态、金额”表头，全部数据只汇总一次，合计放在最后一页。若还需要逐页小计，就写清“小计”和“总计”的区别，不能让重复页脚看起来像重复计算。遇到超长备注行，允许备注按语义断开并延续编号，比把整行文字压缩成小字更容易复核。

表格批量操作范围讨论的是交互场景，但其中的表格字段和状态可以帮助梳理打印版的数据边界。不要把滚动容器直接打印成一条被裁切的窄框，也不要为了避免分页把所有数据缩成无法阅读的缩略字。

A4 纵向、横向和黑白都要验收

在 Pixso 中可以先并排画出月度销售报表的屏幕稿和两页 A4 纸面稿：屏幕保留筛选与打印入口，纸面标题下固定写出“2026 年 9 月 · 全部筛选结果”；第二页接续数据并重复表头，在末页放置唯一的总计。这样评审时可以直接比较哪些信息被保留、哪些交互被移除，以及跨页之后是否仍能读懂。

可以在 Pixso 中评审屏幕与打印两套版式，需要分享设计文件时再使用PDF 分享与交付。纸面稿用来约定层级和断页位置；真实网页的数据装载、浏览器分页与打印设置，继续按同一组报表内容验收。

页眉、页脚和来源要服务于复核

纸面文件离开浏览器后，读者往往不知道它来自哪个页面、生成于何时、筛选了哪些条件。页眉可以放文档标题、版本或部门名称，页脚可以放页码、生成时间和来源。不要把长 URL 或技术日志挤进每一页；对需要追溯的链接，可保留标题和短地址，并在文末集中列出完整来源。

页眉页脚的高度要纳入可用页面区域，不能在设计稿中只画内容而把打印机不可打印边距留给实现。长标题要能换行，页码在黑白打印中仍应有足够对比度。合同和评审记录还要考虑打印后手写的空间，纸面任务需要留白时，不能用更多装饰填满页面。

打印预览中的三个高频陷阱

第一个陷阱是内容被缩放到一页，读者只能看到小字。遇到宽表格，应先调整列优先级或使用横向纸张，再考虑缩放。第二个陷阱是背景色和阴影在打印设置中被关闭，状态标签因此失去区别。关键状态要使用文字、边框或图形符号辅助表达。第三个陷阱是分页把标题留在上一页末尾、正文落到下一页，读者无法建立上下文。可以通过标题和正文的分页关系、卡片断点以及表格表头重复来修正。

验收时至少打印一份正常数据和一份极端数据。极端数据包括最长标题、最多表格列、空数据、错误提示和跨多页条款。每种数据都记录浏览器、纸张、方向和缩放设置。这样出现差异时，团队能判断是内容规模、浏览器实现还是样式规则造成的，而不是反复争论“设计稿看起来没问题”。

为报表补上 @media print 与分页规则

网页打印问题常常源于屏幕版没有明确纸面任务。可以先在设计稿中画出两页或三页纸，标出标题、条件、数据、来源和页码，再决定 CSS 规则。纸面原型要故意放入最长标题、最多列和跨页内容，观察信息层级是否仍然成立。确认结构后，再把需要隐藏、重复或断开的元素写成样式行为。

纸张是固定尺寸，内容却可能无限增长。对合同条款和评审记录，空白不是浪费，而是阅读和签注的空间；对数据报表，过大的空白可能让一页只剩几行。设计决策应由任务驱动，必要时提供“摘要版”和“明细版”两个打印输出，而不是让同一份页面同时满足所有用途。

下面把“纵向 A4、隐藏操作栏、避免标题孤立和行被拆开”写成一组起始规则。类名需对应项目实际结构；表头重复仍要在目标浏览器中验证。

@page { size: A4 portrait; margin: 16mm; }
@media print {
  .screen-toolbar { display: none; }
  .report-scroll { height: auto; overflow: visible; }
  h2, h3 { break-after: avoid; }
  tr, .summary-card { break-inside: avoid; }
  thead { display: table-header-group; }
  img { max-width: 100%; }
}

这些规则不会自动加载尚未进入 DOM 的数据，也不能把超出整页高度的卡片强行留在一页。先确认数据完整、解除屏幕滚动容器的裁切，再检查分页；需要横向纸张的报告应明确采用 A4 landscape，不要只减小字号。

打印失败时给出可解释的退路

浏览器打印可能遇到字体未加载、图片未完成、页眉页脚被裁切或用户关闭背景图形等情况。交付清单要写出退路：关键标题使用可读文字而不是背景图，数据图表提供表格或文字摘要，图片缺失时保留说明和来源，页码和文档标题不能只依赖浏览器默认页眉。这样即使打印设置不同，纸面仍能传达主要结论。

对需要签字或归档的文件，打印前应显示版本、生成时间和数据范围，打印后再核对页数和顺序。若纸张方向被用户改动，表格不能静默裁切；应通过打印预览或说明让用户知道需要横向纸张。不要用“建议缩放到一页”掩盖结构不适配，优先调整信息优先级和分页规则。

以月度销售报表为例，屏幕列表可能只加载当前一页，用户点击打印却期待完整的筛选结果。设计必须先明确打印的是当前页、所选记录还是全部结果，并在打印标题下显示该范围。虚拟滚动列表也不等于所有行已经进入页面，不能只套上打印样式就认为数据完整。研发需要确认数据准备完成，再开放打印动作；准备失败时保留筛选条件并显示重试入口。对包含个人信息的报表，还应沿用产品现有的访问权限和脱敏规则，避免打印版意外显示屏幕版无权查看的字段。

参考资料

• MDN：@page CSS at-rule，用于纸张、方向和页边距。
• W3C CSS Paged Media Module Level 3，用于分页上下文和页盒概念。
• MDN：break-inside，用于卡片和表格断点意图。
• MDN：Printing，用于屏幕与打印媒体的样式切换。