user3183411 user3183411 - 1 month ago 6
CSS Question

Table header shows at top of page during print

I'm trying to create printable pages for my web app. I came across someone's JSFiddle and have been trying to implement it.

Here is the link with my added code below.

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

}


It works pretty well but it displays the table header at the top of the page that contains the table.

enter image description here

Here is my mustache template that I am using to display the data.

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


I'm not sure what other options I have. I need to be able to create printable pages because they are reports. If anyone has any other idea's I am totally up for it.

Answer

I have edited your second snippet by adding a below css inside the @media print { }

Please execute and have a look.

thead {
      display: table-row-group;
    }

Also, pasted the same snippet here.

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