html - 表格标题在打印过程中显示在页面顶部

Question

我正在尝试为我的网络应用程序创建可打印页面。我遇到了某人的 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 
    }
    */

}

它工作得很好，但它在包含表格的页面顶部显示表格标题。

这是我用来显示数据的 mustache 模板。

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