html - HTML 打印：避免使用行跨度的表格行分页，添加页码

Question

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

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

我还想在每个打印页面的底部添加一些自定义文本，例如“第 1 页，共 10 页”。

这是当前的结果：

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

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

具有行跨度的每一行都有-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__container占据所有单元格并避免分页符的 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);
  }
}

标签： htmlcssprintingpage-breakpage-break-inside