印刷中にページの上部に表のヘッダーが表示されます

Question

私のWebアプリケーション用の印刷可能なページを作成しようとしています。私は誰かのJSFiddleを見つけてそれを実装しようとしてきました。

以下は、私の下に追加したコードのリンクです。

http://jsfiddle.net/2wk6Q/5272/

body { 
    margin: 0; 
    padding: 0; 
    background-color: #FAFAFA; 
    font: 12pt "Times New Roman"; 
} 

.report-title{ 
    padding: 0px; 
} 

.org-info{ 
    padding: 0px; 
    font-size: 11px; 
    margin-bottom: 50px; 
} 


* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.page { 
    width: 21cm; 
    min-height: 29.7cm; 
    padding: 2cm; 
    margin: 1cm auto; 
    border: 1px #D3D3D3 solid; 
    border-radius: 5px; 
    background: white; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
} 

@page { 
    size: A4; 
    margin: 0; 
} 
@media print { 
    .page { 
     margin: 0; 
     border: initial; 
     border-radius: initial; 
     width: initial; 
     min-height: initial; 
     box-shadow: initial; 
     background: initial; 
     page-break-after: always; 
    } 

    /* 
    table { 
     page-break-inside:auto 
    } 
    tr { 
     page-break-inside: avoid; 
     page-break-after: auto; 
    } 
    thead{ 
     display:table-header-group 
    } 

    tfoot { 
     display:table-footer-group 
    } 
    */ 

} 

それはかなりうまく動作しますが、それは、テーブルを含むページの上部にあるテーブルのヘッダーを表示します。

は、ここで私はデータを表示するために使用しています私の口ひげテンプレートです。

{{#members}} 
<div class="page"> 
    <h3 class="text-center report-title">{{orgName}} {{year}} Annual Giving Statement</h3> 
    <div class="org-info text-center"> 
     <p>No goods or services were provided, only intangible religious benefits. Tax ID: {{taxId}}</p> 
     <p>{{orgName}} * {{orgAddress1}} {{orgAddress2}} * {{orgCity}}, {{orgState}} {{orgZip}}</p> 
     <p>{{orgContact}} * {{orgEmail}} * {{orgUrl}}</p> 
    </div> 
    <p>{{date}}</p> 
    <address> 
     {{displayName}}<br> 
     {{address1}}<br> 
     {{#address2Exists}} 
     {{address2}}<br> 
     {{/address2Exists}} 
     {{city}}, {{state}} {{zip}} 
    </address> 
    <p> 
     Dear {{displayName}}, 
     <br><br> 
     Thank you so much for your generosity in support of the mission God has given Brian's Test. Below is 
     your tax deductible giving summary of gifts received during the 2016 calendar year. On the following 
     page you will find an itemized giving statement. As a reminder, items purchased, such as shirts, 
     artwork, coffee mugs, etc, are not tax deductible, as well as any monies for an event where goods or 
     services were provided. 
     <br> 
     <br> 
     Also enclosed you will find a copy of the 2016 Budget Report. This report as well as each quarter's 
     report are also available for access online at illcomplacent.com. If you have any questions about this 
     statement or any portion of the budget report, please feel free to call or email us anytime. 
     <br> 
     <br> 
     Sincerly, 
     <br><br><br><br> 
     {{orgContact}} 
    </p> 
</div> 
<div class="page"> 
    <h3 class="text-center">Total {{year}} YTD Tax Deductible Gift: ${{sum}}</h3> 
    <br> 
    <table class="table table-condensed"> 
     <thead> 
      <th>Date Received</th> 
      <th>Type</th> 
      <th>Amount</th> 
     </thead> 
     <tbody> 
      {{#donations}} 
       <tr> 
        <td>{{dateRec}}</td> 
        <td>{{paymentType}}</td> 
        <td>${{amount}}</td> 
       </tr> 
      {{/donations}}    
     </tbody> 
     <tfoot> 
      <td></td> 
      <td></td> 
      <td><strong>${{sum}}</strong></td> 
     </tfoot> 
    </table> 
</div> 
{{/members}} 

私には他にどのようなオプションがありますか。レポートなので、印刷可能なページを作成できる必要があります。誰かが他のアイデアを持っているなら、私はそれを完全にアップしています。

Answer 1

私が見て実行していてください@media print { }

内のcssの下に追加して、第二のスニペットを編集しました。

thead { 
     display: table-row-group; 
    } 

また、同じスニペットをここに貼り付けます。働い

window.print();

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #FAFAFA; 
 
    font: 12pt "Times New Roman"; 
 
} 
 

 
.report-title{ 
 
    padding: 0px; 
 
} 
 

 
.org-info{ 
 
    padding: 0px; 
 
    font-size: 11px; 
 
    margin-bottom: 50px; 
 
} 
 

 

 
* { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
} 
 

 
.page { 
 
    width: 21cm; 
 
    min-height: 29.7cm; 
 
    padding: 2cm; 
 
    margin: 1cm auto; 
 
    border: 1px #D3D3D3 solid; 
 
    border-radius: 5px; 
 
    background: white; 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
} 
 

 
@page { 
 
    size: A4; 
 
    margin: 0; 
 
} 
 
@media print { 
 
    .page { 
 
     margin: 0; 
 
     border: initial; 
 
     border-radius: initial; 
 
     width: initial; 
 
     min-height: initial; 
 
     box-shadow: initial; 
 
     background: initial; 
 
     page-break-after: always; 
 
    } 
 
    
 
    thead { 
 
     display: table-row-group; 
 
    } 
 
    
 

 
    /* 
 
    table { 
 
     page-break-inside:auto 
 
    } 
 
    tr { 
 
     page-break-inside: avoid; 
 
     page-break-after: auto; 
 
    } 
 
    thead{ 
 
     display:table-header-group 
 
    } 
 
    
 
    tfoot { 
 
     display:table-footer-group 
 
    } 
 
    */ 
 
    
 
}

{{#members}} 
 
<div class="page"> 
 
    <h3 class="text-center report-title">{{orgName}} {{year}} Annual Giving Statement</h3> 
 
    <div class="org-info text-center"> 
 
     <p>No goods or services were provided, only intangible religious benefits. Tax ID: {{taxId}}</p> 
 
     <p>{{orgName}} * {{orgAddress1}} {{orgAddress2}} * {{orgCity}}, {{orgState}} {{orgZip}}</p> 
 
     <p>{{orgContact}} * {{orgEmail}} * {{orgUrl}}</p> 
 
    </div> 
 
    <p>{{date}}</p> 
 
    <address> 
 
     {{displayName}}<br> 
 
     {{address1}}<br> 
 
     {{#address2Exists}} 
 
     {{address2}}<br> 
 
     {{/address2Exists}} 
 
     {{city}}, {{state}} {{zip}} 
 
    </address> 
 
    <p> 
 
     Dear {{displayName}}, 
 
     <br><br> 
 
     Thank you so much for your generosity in support of the mission God has given Brian's Test. Below is 
 
     your tax deductible giving summary of gifts received during the 2016 calendar year. On the following 
 
     page you will find an itemized giving statement. As a reminder, items purchased, such as shirts, 
 
     artwork, coffee mugs, etc, are not tax deductible, as well as any monies for an event where goods or 
 
     services were provided. 
 
     <br> 
 
     <br> 
 
     Also enclosed you will find a copy of the 2016 Budget Report. This report as well as each quarter's 
 
     report are also available for access online at illcomplacent.com. If you have any questions about this 
 
     statement or any portion of the budget report, please feel free to call or email us anytime. 
 
     <br> 
 
     <br> 
 
     Sincerly, 
 
     <br><br><br><br> 
 
     {{orgContact}} 
 
    </p> 
 
</div> 
 
<div class="page"> 
 
    <h3 class="text-center">Total {{year}} YTD Tax Deductible Gift: ${{sum}}</h3> 
 
    <br> 
 
    <table class="table table-condensed"> 
 
     <thead> 
 
      <th>Date Received</th> 
 
      <th>Type</th> 
 
      <th>Amount</th> 
 
     </thead> 
 
     <tbody> 
 
      {{#donations}} 
 
       <tr> 
 
        <td>{{dateRec}}</td> 
 
        <td>{{paymentType}}</td> 
 
        <td>${{amount}}</td> 
 
       </tr> 
 
      {{/donations}}    
 
     </tbody> 
 
     <tfoot> 
 
      <td></td> 
 
      <td></td> 
 
      <td><strong>${{sum}}</strong></td> 
 
     </tfoot> 
 
    </table> 
 
</div> 
 
{{/members}}