为每个 CSS 分页符开始设置边距

Question

请原谅我的标题，我找不到更准确的描述。

我将表格中的一长行分成几页。 TR 的 page-break-after 一切正常。我唯一的问题是，它从页面的最开始到最底部结束，使我的页眉和页脚被表格数据覆盖。我尝试在各处放置边距和填充，但似乎都不起作用。下面是我的 CSS，

 @media print {

    html, body {
        width: 210mm;
        height: 297mm;
        background:#fff;
    }
    .page-layout {
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
    table.report { page-break-after:auto }
    table.report tr    { page-break-inside:avoid; page-break-after:auto }
    table.report td    { page-break-inside:avoid; page-break-after:auto }
    table.report thead { display:table-header-group; margin-top:50px; }
    table.report tfoot { display:table-footer-group }

    .header {
        display:block;
        position:fixed;
        top: 0px;
        font-weight:bold;
        font-size:14px;
        text-align:right;
        right:0px;
    }
    .footer {
        z-index: 1;
        position: fixed;
        left: 0;
        bottom: 0;
        text-align: left;
        left: 0;
        width:100%;
        display:block;
    }
}

下面是我的 HTML

 <div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>

<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>

</div>
<div class="footer">MY FOOTER</div>

这是打印时的样子，

原文由 luca ditrimma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在网上深入研究后，我发现没有合适的方法来做。有一个关于 @page 规则 的讨论可能是我想要实现的。不幸的是它没有用。我了解到此功能尚未在大多数浏览器上实现。不知道哪个浏览器支持。最后，我遇到了一些技巧。 THEAD 和 TFOOT 设计为在打印时重复。所以我在 thead 顶部放了一个空白行，每次重复时都会留下一个空白空间，刚好足以让标题显示出来。还有一个空行在 tfoot 下面用于页脚区域。不幸的是， tfoot 并没有在 chrome 上重演。 IE 和 Firefox 都可以。

原文由 luca ditrimma 发布，翻译遵循 CC BY-SA 3.0 许可协议