添加印刷动态页面的标头

Question

我有多个表格填充的表。

我想在打印模式下的每个页面上打印标头，但是当桌子排在下一页上打印的页面上不适合时，我的标题打印在它们上。这样：这是我的印刷预览

如何在页面标题和页面数据之间设置边距？

我搜索了很多，但似乎没有任何作用，甚至没有工作：固定不正常。

 @page {
       size: A4;
       margin-left: 0px;
       margin-right: 0px;
       margin-bottom: 0px;
       margin-top: 0px;
  }
@media screen {
     .header {
         display: none;
      }
  }
@media print {
    .header {
        position: fixed;
        top:10px;
        width:100%;
        margin:10px;
        border: 3px solid #000;
    }
}

示例html：

<table class="header">
    <tr>
        <td>
         This is my header table
        </td>
    </tr>
 </table>
<table>
   ....
</table>
<table>
  ....
</table>
and more...

Answer 1

您只需在标题底部添加一个边距即可。

@media print {
    .header {
        width:100%;
        margin:10px;
        margin-bottom: 100px;
        border: 3px solid #000;
    }
}

这与 position: fixed;无效，没有它。