Question

我在网页中有这个结构，假设表格很长。

<header>
   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>
</header>
<section>
   <table style="width:100%">
     <tr>
       <th>Firstname</th>
       <th>Lastname</th> 
       <th>Age</th>
     </tr>
     <tr>
       <td>Jill</td>
       <td>Smith</td> 
       <td>50</td>
     </tr>
     <tr>
       <td>Eve</td>
       <td>Jackson</td> 
       <td>94</td>
     </tr>
   </table>
</section>
<footer>
   <h3><img src="//some_image.jpg"/> 2016 © The report company</h3>
</footer>

我需要的是打印这个长桌，但每页都重复我的页眉和页脚。

喜欢这个

我已经尝试使用position:fixed作为页眉和页脚，但事实是内容在每个页面的页眉和页脚下切片。

CSS3规则在Chrome中无效。

我没有找到任何解决方案。

有什么想法吗？

Answer 1

在打印介质样式表中使用CSS。（最好使用类名或id选择器，以避免意外地弄乱页面中其他地方的类似标签。）

header {
  display: table-header-group;
}

section {
  display: table-row-group;
}

footer {
  display: table-footer-group;
}

Answer 2

此示例应该有效。请参阅代码中的注释。

<!DOCTYPE html>
<html>
<head>
<style>
/*@media print{ */
.tbl{display:table;}
.tbl > div{display:table-row;}
/* table structure is three level: table > row > cell */
.tbl > div > *{display:table-cell;}
/* special cases */
.tbl .tbl-head{display:table-header-group;}
.tbl .tbl-body{display:table-row-group;}
.tbl .tbl-foot{display:table-footer-group;}
/*} end of media print */
</style>
</head>
<body>

<div class="tbl">
<!-- I intentionally moved following (commented) block to the bottom
     to show that it appear at the top. For test purpose only ;) -->
<!--<div class="tbl-head">
<header>
   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>
</header>
</div>-->
<div class="tbl-body">
<section>
   <!--your table here -->
</section>
</div>
<div class="tbl-head"><!--this block will go up -->
<header>
   <h1><img src="//some_logo.jpg"/> 2016 Report</h1>
</header>
</div>
<div class="tbl-foot"><!--This block go to the bottom from any valid place inside .tbl -->
<footer>
   <h3><img src="//some_image.jpg"/> 2016 © The report company</h3>
</footer>
</div>
</div>
</body>
</html>

在每张打印的纸张中重复内容

2 个答案: