Tabellenkopf wird während des Druckens oben auf der Seite angezeigt

Question

Ich versuche druckbare Seiten für meine Webanwendung zu erstellen. Ich bin auf jemandes JSFiddle gestoßen und habe versucht, es umzusetzen.

Hier ist der Link mit meinem unten hinzugefügten Code.

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 
    } 
    */ 

} 

Es funktioniert ziemlich gut, aber es zeigt den Tabellenkopf an der Spitze der Seite, die die Tabelle enthält.

Hier ist meine Schnurrbart-Vorlage, die ich die Daten anzuzeigen verwenden.

{{#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}} 

Ich bin mir nicht sicher, welche anderen Optionen ich habe. Ich muss in der Lage sein, druckbare Seiten zu erstellen, da es sich um Berichte handelt. Wenn jemand eine andere Idee hat, bin ich total dafür.

Answer 1

Ich habe Ihre zweite Snippet bearbeitet von unten CSS in der @media print { }

Hinzufügen Bitte führen und einen Blick.

thead { 
     display: table-row-group; 
    } 

Auch eingefügt das gleiche Snippet hier.

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