在每張印張上重複內容

我在網頁中有這樣的結構，假設表格很長。在每張印張上重複內容

<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

在每張印張上重複內容

回答

相關問題