使用 HTML 和 CSS 在第一个打印页面上显示不同的页眉答案

【问题标题】：Displaying A Different Header on the First Printed Page with HTML and CSS使用 HTML 和 CSS 在第一个打印页面上显示不同的页眉
【发布时间】：2011-06-21 16:09:52
【问题描述】：

是否有可能通过 HTML 和/或 CSS 的任意组合，在第一个 打印的页面上显示一个标题，然后在每个后续 显示不同的标题打印页？我知道 @media print CSS 标记仅在网站打印时显示某些内容，但这并不能让我在多个页面上使用不同的标题。

感谢任何帮助，谢谢！

【问题讨论】：

打印样式表支持非常有限。我知道，重复标题的唯一方法是使用表格。 thead 元素在每个页面上重复（不确定它是否适用于所有浏览器）。
是的，我实际上也必须为网站上的表格这样做。我相信目前至少所有现代的非 WebKit 浏览器都支持 <thead> 标签。
这是一个duplicate，有一些非常不同的答案。

标签： html css printing web header

【解决方案1】：

我能看到的唯一方法是使用不同的标题并强制page-breaks。

所以

PAGE 1 

   HEADER 1 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

PAGE 2 

   HEADER 2 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

etc..

您的标题将获得 printHeaders 类

您的分页符 div 类似于 <div class="pageBreak"></div>

在你的 CSS 中，你会有类似于

的东西

  .printHeaders, .pageBreak  {display:none;}

@media print {
  .printHeaders, .pageBreak  {display:block;}
  .pageBreak  {page-break-before:always;}
}

【讨论】：

不幸的是，由于非常大的动态表很难正确手动“中断”，我无法强制分页。不过，感谢您的解决方案。这实际上可能对另一个项目有用......
没有问题。希望它对其他项目有所帮助！

【解决方案2】：

来自http://css-discuss.incutio.com/wiki/Printing_Headers

如果您想要完整的、受 CSS 控制的打印页眉和页脚，您需要等到浏览器实现支持对于 CSS3 分页媒体候选人推荐。它明确提供对于设施，但在相当不同的方式，使用边距框。

可能是因为……

... CSS 职位描述：固定，[是]即 “......在印刷媒体的情况下类型，该框呈现在每个页，并且相对于页...” [第 9.3.1 节]

...但文章说它现在不起作用。

但是，为了帮助你，文章后面说：

在正文上设置上边距（对于示例）仅适用于第一个页面。

【讨论】：