HTML 打印：避免使用 rowspan 的表格行分页，添加页码

Question

我在打印 html 页面时遇到了许多问题。我花了一些时间并尝试了不同的解决方案，但都没有奏效。

http://jsfiddle.net/kasheftin/vj7hr1cg/1/ - 这是我想打印的表格。我尽可能地简化了它。它不适合一页，目标是避免在行内容内分页。

此外，我希望在每个打印页面的底部都有一些自定义文本，例如“第 1 页，共 10 页”。

这是当前的结果：

如我们所见，最后一个单元格不适合页面，它没有底部边框，页码打印为 1/5 而不是 css 中指定的“1 of 5”。

这是我到目前为止尝试过的：

具有 rowspan 的每一行都有-primary类名。除了在这些行之前的任何地方都避免分页：

.b-rtable__row, .b-rtable__cell {
  page-break-inside: avoid !important;
}
.b-rtable__row {
  page-break-before: avoid !important;
  page-break-after: avoid !important;
}
.b-rtable__row.-primary {
  page-break-before: auto !important;
}

将每个单元格内容包装到.b-rtable__containerdiv 中，该 div 占据所有单元格并具有分页符内避免：

.b-rtable__row { 
  height: 1px; // Fix for 100% height;
}
.b-rtable__cell {
  height: inherit;
}
.b-rtable__container {
  width: 100%;
  height: 100%;
  page-break-inside: avoid !important;
  position: relative; // tried with and without that rule;
  display: table; // tried with and without that rule;
}

添加了这些规则以page 1 of 10在每个页面底部绘制自定义文本，但未显示：

@page {
  size: auto;
  @bottom-center {
    content: "page " counter(page) " of " counter(pages);
  }
}