如何在Google Chrome的HTML表格中实现分页？

我试图在HTML页面中打印一个用jQuery生成的大表。 我使用的是Chrome 26.0.141。 问题在于分页符。

我最初使用这个CSS

#membersList table { page-break-inside:auto; position:relative} #membersList tr { page-break-before:avoid; page-break-after:auto;position:relative} #membersList td{ border:solid 1px #CCCCCC;width:auto;position:relative} #membersList thead { display:table-header-group;position:relative } #membersList tfoot { display:table-footer-group;positioion:relative} 

这个dint工作，所以我搜索并获得此链接谷歌Chrome打印分页

根据该链接中的一个答案，我使用以下CSS属性

  -webkit-region-break-inside: avoid; 

但是当我运行并检查元素时，它默认被删除。

什么是解决方案？ 我搜索过很多post。 他们说最近的版本不支持分页。 如果这是真的那么还有什么其他解决方案可以在谷歌浏览器中实现分页？

Answer 1

最后我解决了这个问题。 我做了tr{display:block;}然后我修复了单元格间距。

分页符仅适用于块级元素。

Answer 2

正如MDN所说：

WebKit浏览器不支持此属性; 但有些具有非标准的-webkit-column-break-after和-webkit-region-break-after，其参数与page-break-after类似。

所以你需要使用一些最适合你的值的page-break-after 。 这里是其中的一些：

page-break-after CSS属性在当前元素之后调整分页符。

auto：初始值。 自动分页（既不强制也不禁止）。

始终：始终强制元素后面的分页符。

避免：避免元素后的分页符。

left：在元素后强制分页，以便将下一页格式化为左页。

right：在元素后强制分页，以便将下一页格式化为右页。

您还可以使用break-after属性：

break-after CSS属性描述了在生成的框之后页面，列或区域如何中断行为。 如果没有生成框，则忽略该属性。

Answer 3

您可能需要将表拆分为多个部分，并将其page-break-after css属性设置为always 。 这是有效的（使用beta版Chrome），我不知道是否有办法在连续表中执行此操作。

Answer 4

我已经为qt提供了一些补丁来改进表分页符。 您可以查看问题168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13

Answer 5

我已经使用像几个表这样的东西来实现这个事情，就像@sabof提到的那样。 说我希望页面上有11行。

  11 *   11 *  

HTML标记;

我动态创建了行，所以JQuery逻辑如下：

 var j = 23; for (var i = 0; i < j; i++) { if (i != 0 && i % 11 == 0) { $("#printSection div").append(""); } var node = "Your Data"; $("#printSection tbody").last().append(node); } } 

CSS是这样的;

 #printSection table { page-break-after: always; page-break-inside: avoid; break-inside: avoid; }