Table header 在打印期间显示在页面顶部

Question

我正在尝试为我的网络应用程序创建 printable 页面。我遇到了某人的 JSFiddle 并一直在尝试实现它。

下面是 link 我添加的代码。

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

}

它工作得很好，但它在包含 table.

的页面顶部显示 table header

这是我用来显示数据的小胡子模板。

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

我不确定我还有哪些其他选择。我需要能够创建 printable 页面，因为它们是报告。如果有人有任何其他想法，我完全赞成。

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

Table header 在打印期间显示在页面顶部

Table header shows at top of page during print

html

css

mustache

twitter-bootstrap