在打印时为动态页面添加页眉

Question

我有多个动态填充的表格。

我想在打印模式下在每一页上打印页眉，但是当表格行不适合页面时，它们会打印在下一页上，而我的页眉会打印在上面。 像这样：This is my print preview

如何设置页眉和页面数据之间的边距？

我搜索了很多，但似乎没有任何效果，甚至 position:fixed 也没有按预期工作。

 @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; 结合使用。