打印預覽在每個頁面上重複tfoot

我的問題是，我有兩個不同的html文件，包含一個包含headader，tfooter和tbody的表格。打印預覽在每個頁面上重複tfoot

第一個是我自己創作測試的原因，它看起來像這樣：

<html> 
<head> 
    <title>The Invoice</title> 
    <style type="text/css"> 

    table.invoice { background-color: #dddddd; font-family: sans-serif; } 

    td, th { background-color: #ffffff; padding: 5pt; } 
    td.unit { text-align: right; } 
    td.price { text-align: right; } 

    thead { display: table-header-group; } 
    tfoot th { text-align: right; } 

    </style> 
</head> 
<body> 
    <div style="width:auto !important; overflow:hidden; position:relative"> 
    <table class="invoice" cellspacing="1" cellpadding="0"> 
     <thead> 
      <th>Unit</th> 
      <th>Description</th> 
      <th>Price</th> 
     </thead> 
     <tfoot> 
      <tr> 
      <th colspan="2">Sum</th> 
      <td class="price">1.230,32 EUR</td> 
      </tr> 
     </tfoot> 
     <tbody> 
       <tr><td>1</td><td>Excel</td><td >150,00 EUR</td></tr> 
       <tr><td>2</td><td>Document</td><td>150,00 EUR</td></tr> 
          ... and so on ... 
     </tbody> 
    </table> 
    </div> 
</body> 
</html>

每當我試圖在IE9打印預覽它顯示在最後一頁上TFOOT（第5頁在我的情況）其中顯示了主體內容價格列的總體總和。當我在Mozilla Firefox 11.0中嘗試使用相同的功能時，它顯示了當前不想要的每個頁面上總體總和的tfoot。

我問的主要原因是因爲我有一個FreeAgent html dom，我想打印出一些發票。有了這個html文件，即使IE9在每一頁上都顯示了tfoot，這又是！我不想要。

我

@media print { tfoot { display: table-footer-group; 
       position: absolute;   
       bottom: 0; }}

有它顯示的頁腳只有一次發揮各地，但在左下的第一頁上的所有進行的跨我的文字休息...

想法或解決方案相比，不勝感激！ :)

來源

2012-03-21 PernerOl

tfoot實際上應該是「始終在底部可見」（或沿着這些線），所以Firefox在每頁上打印頁腳底部都是合理的。

尤其這是因爲如果你有表頭的單元格來命名列，或正在使用的頁腳標籤或重複標題非常有用。

您應該將您的總和作爲表格末尾的另一行。

來源

2012-03-22 12:33:38

試試這個CSS在你的打印樣式表，就會使TFOOT充當另一行還保持這有點像Datatables.net需要正確的語法。

table tfoot{display:table-row-group;}

來源

2015-05-20 04:14:46

打印預覽在每個頁面上重複tfoot

回答

相關問題