html 打印时添加页眉页脚

你需要用你的整个内容的表里面：

...并添加以下CSS：

@media print {

thead { display: table-header-group; }

tfoot { display: table-footer-group; }

}

@media screen {

thead { display: block; }

tfoot { display: block; }

}

我需要补充，这可能不是基于WebKit的浏览器工作(截至目前)作为Safari，Chrome和Opera。请在您想要支持的所有浏览器上进行测试。

Chrome可能支持另一种选择：将页眉和页脚设置为position:fixed，但我无法避免在快速测试中与页面内容重叠(即超过一页的页面内容很长)。

你可能想有一个在分页不会打破内容元素 - 例如列出跨越多行文本的项目。为了避免这种情况，你可以设置以下CSS：

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */

page-break-inside: avoid; /* Firefox */

break-inside: avoid; /* IE 10+ */

问题是，我的所有段落元素都会与页面底部的页脚重叠。为了解决这个问题，我使用了以下CSS：

footer { font-size: 9px; color: #f00; text-align: center; } 
@page { size: A4; margin: 11mm 17mm 17mm 17mm; } 
@media print { 
  footer { position: fixed; bottom: 0; } 
  .content-block, p { page-break-inside: avoid; } 
  html, body { width: 210mm; height: 297mm; }
 }

p和content-block的page-break-inside对我来说至关重要。每当我在h*后面有一个p时，我都会将它们都包装在一个div class = "content-block">中，以确保它们保持在一起并且不会中断。

表格中

thead.report-header { display:table-header-group; } 
tfoot.report-footer { display:table-footer-group; }