我在网页中有此结构，假设表很长。
<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设置页眉和页脚，但事实是，内容在每个页面的页眉和页脚下都 slice 了。CSS3规则在Chrome中无效。
我没有用js找到任何解决方案。
有任何想法吗？
最佳答案
这个例子应该可行。查看代码中的注释。
<!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>