你需要用你的整个内容的表里面,像功率:
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+ */