在打印時使用css重複每頁的標題

我有一個需要打印多行HTML表格的項目。我想在每頁頂部顯示thead部分。我正在使用IE11瀏覽器。在打印時使用css重複每頁的標題

<style> 
    @media print { 
     #Header { 
      display: table-header-group; 
     } 

     table { 
      page-break-inside: auto; 
     } 

     tr { 
      page-break-inside: auto; 
      position: static; 
     } 
    } 
</style> 


<div class="tab-pane active " id="template"> 
    <table> 
     <thead> 
      <div id="Header"> 
       <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered"> 
        <tbody> 
         <tr id="1"> 
          <td style="height: 18px; border:solid; " ></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
         </tr> 
         <tr id="2"> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
          <td style="height: 18px; border:solid; "></td> 
         </tr> 

        </tbody> 
       </table> 
      </div> 
     </thead> 
     <tbody> 
      <div id="contents"> 
       <!--more then 800 rows in table--> 
      </div> 
     </tbody> 
    </table> 
</div>

來源

2016-08-22 Prashant16

這有幫助嗎？ [HTML header/footer]（http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document -w） – Whothehellisthat

您的HTML錯誤。表頭只是應該有行，而不是另一個表的div。我不需要和媒體CSS重複表頭。 –

您是否嘗試過將標頭ID設置爲位置：用頂部固定：0？我知道這適用於某些實現。 –

您可能通過PHP的實現來實現這一點。當我渴望開始使用PHP時，我的導師剛剛讓我們使用PHP創建了一個「Web模板」。這個'模板'將確保頁面是相似的，並且具有一致的標題，導航，頁腳等。

您可以創建一個文件（thead.php），它將包含所有要重複的代碼。我假設你想重複<thead></thead>

（thead.php）

<thead> 
    <div id="Header"> 
     <table style="width: 100%; table-layout: fixed;" id="tbl_1" class="table table-bordered"> 
      <tbody> 
       <tr id="1"> 
        <td style="height: 18px; border:solid; " ></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
       </tr> 
       <tr id="2"> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
        <td style="height: 18px; border:solid; "></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</thead>

（yourfile.php）

<style> 
@media print { 
    #Header { 
     display: table-header-group; 
    } 

    table { 
     page-break-inside: auto; 
    } 

    tr { 
     page-break-inside: auto; 
     position: static; 
    } 
} 
</style> 


<div class="tab-pane active " id="template"> 
    <table> 
     <?php include 'thead.php'; ?> 
     <tbody> 
      <div id="contents"> 
       <!--more then 800 rows in table--> 
      </div> 
     </tbody> 
    </table> 
</div>

之間的內容這將導致你必須改變你的文件類型到.php文件，你將不得不使用本地服務器進行測試，因爲瀏覽器無法處理.php文件。我個人使用XAMPP，但我相信還有很多其他的選擇。

如果您還不知道任何php，它所做的實質上是基於通過.PHP文件中的腳本給出的信息爲您寫入HTML文件。在文件通過服務器運行後到達瀏覽器時，它就是可以處理和顯示的簡單HTML代碼。因此，如果按照我向您展示的方式進行操作，最終得到瀏覽器的文件將沒有任何區別，您只需要編寫更少的代碼。

來源

2017-05-15 00:39:11 Lordbug

在打印時使用css重複每頁的標題

回答

相關問題