Question

我有多个动态填充的表。

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

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

我搜索了很多，但似乎没有任何工作，甚至位置：固定不能按预期工作。

 @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;，如果它不起作用。

在打印时为动态页面添加标题

1 个答案: