印刷中にCSSを使用して各ページのヘッダーを繰り返します。

Question

多くの行を含むHTML表を印刷するプロジェクトがあります。私は各ページの上部にtheadセクションを表示したいと思います。 IE11ブラウザを使用しています。

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

Answer 1

PHPの実装でこれを実現できる可能性があります。私が最初にPHPを始めたとき、私のインストラクターはPHPを使って 'ウェブテンプレート'を作成しました。このテンプレートは、ページが似ており、ヘッダ、ナビゲーション、フッターなどが一貫していることを保証します。

繰り返すコードをすべて含むファイル（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ファイルを処理することができないので、テストのためにローカルサーバを使用する必要があります。私はXAMPPを個人的に使っていますが、他にもたくさんの選択肢があると確信しています。

phpがまだ分からない場合は、.PHPファイルのスクリプトを使って与えられた情報に基づいてHTMLファイルを作成します。サーバーを通過した後にファイルがブラウザに到達するまでに、処理と表示が可能な単純なHTMLコードです。したがって、ブラウザに表示される最終的なファイルは、私があなたに見せたやり方を変えても変わることはありません。書き込みするコードが少なくて済みます。