在每张印张上重复内容

我在网页中有这样的结构，假设表格很长。在每张印张上重复内容

<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中无效。

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

任何想法？

来源

2016-07-14 George

你看了下面的问题[如何使用HTML在每个打印页上打印页眉和页脚？]（http://stackoverflow.com/questions/1360869/how-to-use- html-to-print-header-footer-on-every-printed-page）？ – DavidDomain

将“”和“”添加到您的表格中。 –

@DavidDomain我已经看到了，但没有运气。 – George

这个例子应该工作。请参阅代码中的注释。

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

来源

2016-07-15 20:47:01

我认为不工作... http://output.jsbin.com/zopetegaso – George

你试过了吗打印？ Google Chrome浏览器打印预览不会在每个页面上显示页眉和页脚。 FF和IE呢。 –

我从Chrome和Firefox打印出来（以防与它有关），但没有运气。 – George

在打印介质样式表的CSS下面使用。（更好地利用类名或ID选择，以避免意外搞乱与页面的其他地方类似的标记。）

header { 
    display: table-header-group; 
} 

section { 
    display: table-row-group; 
} 

footer { 
    display: table-footer-group; 
}

来源

2016-07-14 22:11:06

我想这不工作或我做错了http://i.imgur.com/lwDbrCO.png – George

在每张印张上重复内容

回答

相关问题