2017-02-25 100 views
2

我有多個動態填充的表格。在打印頁面上添加動態頁面的標題

我想在打印模式下的每個頁面上打印頁眉,但是當表格行不適合頁面打印在下一頁上時,我的頁眉會打印在頁面上。 這樣的:This is my print preview

我該如何設置頁眉和頁面數據之間的邊距?

我搜索了很多,但似乎沒有工作,甚至位置:固定不按預期工作。

@page { 
     size: A4; 
     margin-left: 0px; 
     margin-right: 0px; 
     margin-bottom: 0px; 
     margin-top: 0px; 
    } 
@media screen { 
    .header { 
     display: none; 
     } 
    } 

@media print { 

    .header { 
     position: fixed; 
     top:10px; 
     width:100%; 
     margin:10px; 
     border: 3px solid #000; 
    } 
} 

樣本HTML:

<table class="header"> 
    <tr> 
     <td> 
     This is my header table 
     </td> 
    </tr> 
</table> 

<table> 
    .... 
</table> 

<table> 
    .... 
</table> 

and more... 

回答

0

你可以簡單地在頭的底部添加保證金。

@media print { 
    .header { 
     width:100%; 
     margin:10px; 
     margin-bottom: 100px; 
     border: 3px solid #000; 
    } 
} 

這不符合position: fixed;,沒有它的作品。

+0

是的,我試過了,tnx但不幸的是不起作用 –

+0

@SaMirakf我試過了。當刪除'position:fixed;頂部:10px;'它的工作。 –

+0

如果我刪除位置:固定標題將打印在一個頁面上,而我想每頁 –