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

Question

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

我正在将表格中的一个长行拆分成几个页面。使用TR的分页之后一切都很好。我唯一的问题是，它从页面的最开始和最底部开始，使我的页眉和页脚被表格数据覆盖。我试着到处放边距和填充，但似乎都不起作用。下面是我的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>

这是打印时的样子，

​

Answer 1

经过对网络的深入研究，我发现没有合适的方法来做这件事。有一个关于@page rule的讨论，这可能是我想要实现的目标。不幸的是，它不起作用。我了解到这个特性还没有在大多数浏览器上实现。我不知道哪个浏览器支持它。最后，我遇到了一些技巧。和TFOOT可在打印时重复使用。因此，我在标题顶部的上放了一个空行，每次重复时都留出一个空格，刚好够标题显示出来。并且在页脚区域的tfoot下面还有一个空行。不幸的是，tfoot没有在chrome上重复出现。IE和Firefox都不错。

Answer 2

如果在表格开始之前和之后需要一些额外的空间来放置其他页脚时，您会遇到这样的问题，例如：

​

​

你可以这样修复它：

<style>
   @media print {
   .table-breaked {
      page-break-before: auto;
   }
   .no-border{
      border: none !important;
   }
   .footer-repeat {
      display: table-footer-group;
     }
   }
</style>


<div class="table-breaked">
 <table class="pt-20">
      <thead>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
          <!-- add extra space for printing -->
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <!-- add extra space for printing -->
         <tr>
            <th class="text-center">Value 1<br/>№ Date</th>
            <th class="text-center">Value 2</th>
            <th class="text-center">Value 3</th>
            <th class="text-center">Value 4</th>
            <th class="text-center">Value 5</th>
         </tr>
      </thead>
      <tbody>
       <!-- more trs here -->
         <tr>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
            <th>Data</th>
         </tr>
      </tbody>
      <tfoot class="footer-repeat">
         <!-- add repeated tfoot for extra space -->
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
         <tr class="no-border">
            <td class="no-border">&nbsp;</td>
         </tr>
      </tfoot>
   </table>
</div>

结果如下：

​

​

Answer 3

您可以使用

@page{
  size: A4;
  margin-top: 50px;
  margin-bottom: 50px;
}