html - 如何为具有不同标题的打印准备 HTML

Question

我正在尝试做一个模块，在其中列出日期之间的订单。我已经在 CSS 中设置了所需的参数，如下所示:

@page {
   size: A4;
}
@media print {
    html, body {
    width: 210mm;
    height: 297mm;
  }
...
}

作为页眉，每一页都应显示买家姓名和订单号。我已经设法使用在每个订单后都有 page-break-after: always CSS 代码的 DIV 来做到这一点。这样每个订单都在新页面上开始。

问题是当我的订单中有太多商品并且订单列在不止一页上时。在这种情况下，在第二页上我没有显示标题，但我需要它。

我尝试使用带有 css 属性的 div，例如:top:0; position: fixed; 但是每个单独的标题都会显示在所有页面上，这并不好。

更新:我需要订单每一页的实际订单标题。因此，如果我有一个订单中的 40 件商品(一个页面放不下)，那么我需要在其两个页面上列出该订单的标题。这就是它与 position:fixed 一起工作的方式:

Answer 1

经过数小时的不同尝试(1. 使用像 Courier New 这样的精确宽度字体并计算每个元素的高度，2. 使用 javascript，jquery 查看每个元素的底部是否超过页面的空间限制，我已经放了分页符等...)我已经找到了这个 here 的最佳解决方案.如果你使用

thead {display: table-header-group;

标题显示在每个打印页面的标题上。 tfoot也是一样:

tfoot   {display: table-footer-group;   }