HTML打印：避免对具有行距的表行进行分页，添加页码

Question

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

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

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

这是当前结果：

我们看到，最后一个单元格不适合页面，没有底部边框，页面编号打印为1/5，而不是CSS中指定的“ 5之1”。

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

每个具有rowpan的行都具有-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中，该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);
  }
}