Javascript 在每张打印纸上重复内容_Javascript_Html_Css_Printing

Javascript 在每张打印纸上重复内容

javascript html css printing

Javascript 在每张打印纸上重复内容,javascript,html,css,printing,Javascript,Html,Css,Printing,我在网页中有这样的结构，假设表很长 <header> <h1><img src="//some_logo.jpg"/> 2016 Report</h1> </header> <section> <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastnam

我在网页中有这样的结构，假设表很长

<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>


2016年报告
名字
姓氏
年龄
吉尔
史密斯
50
前夕
杰克逊
94
2016©报告公司

我需要的是打印这张长表，但每页都要重复页眉和页脚

像这样

我已经尝试了页眉和页脚的

position:fixed

，但问题是内容在每页的页眉和页脚下切片

CSS3规则在Chrome中无效

我没有找到js的任何解决方案

有什么想法吗？

在打印媒体样式表中使用下面的CSS。（最好使用类名或id选择器，以避免意外地与页面中其他地方的类似标记混淆..）

这个例子应该有用。请参见代码中的注释

<!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>


/*@媒体印刷{*/
.tbl{display:table；}
.tbl>div{display:表行；}
/*表结构分为三级：表>行>单元格*/
.tbl>div>*{display:表格单元格；}
/*特例*/
.tbl.tbl头{显示：表头组；}
.tbl.tbl正文{显示：表行组；}
.tbl.tbl foot{显示：表页脚组；}
/*}媒体打印结束*/
2016年报告
2016©报告公司

你看了下面的问题吗？将

和

添加到你的表格中。@DavidDomain我已经看到了，但运气不好。@AlexKudryashev这会帮我解决问题还是仅仅是一个语义建议？请看我的答案。我希望它会有帮助。我想它不起作用或者我做错了什么。你试着打印了吗？Google Chrome打印预览不会在每个页面上显示页眉和页脚。FF和IE都有。我从Chrome和Firefox打印出来（以防与此有关）。我从你的链接复制HTML，创建一个页面，保存在我的开发服务器上，在FF 47.0.1中打开，打印到PDF，每个页面上都有页眉和页脚。Google Chrome已知的错误已经8年没有修复。

<!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>