如何在谷歌浏览器的HTML表格中实现分页符

Question

我正试图在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} 

这种力量起了作用，所以我搜索并获得了这个链接谷歌Chrome打印页面破解

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

 -webkit-region-break-inside: avoid;

但是，当我运行并检查元素时，默认情况下会对其进行笔划处理。

解决方案是什么？我搜索了很多帖子。他们说最近的版本不支持分页符。如果这是真的，那么还有什么其他解决方案可以在谷歌Chrome中实现分页？

Answer 1

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

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

Answer 2

如MDN:所述

WebKit浏览器不支持此属性；但有些人有非标准-webkit列中断后和-webkit区域中断后具有与分页符类似的参数。

因此，您需要使用一些最适合您的值的page-break-after。以下是其中的一些：

CSS后的分页符属性调整当前元素。

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

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

避免：避免元素后出现分页符。

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

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

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

break-after-CSS属性描述页面、列或区域在生成的长方体之后打断行为。如果不存在生成的框，该属性将被忽略。

Answer 3

您可能需要将表拆分为多个部分，并将其page-break-aftercss属性设置为always。这适用于（beta Chrome），我不知道是否有办法在连续表中做到这一点。

Answer 4

我为qt提供了一些补丁，以改进表分页符。您可能希望查看第168期http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13

Answer 5

正如@sabof所提到的，我使用了一些类似于几个表的东西来实现这一点。说我想要11行应该在页面上。

<table>
   11 * <tr></tr>
</table>
<table>
   11 * <tr></tr>
</table>

HTML标记；

<div id="printSection">
    <div>
    </div>
</div>

我动态地创建了行，因此JQuery逻辑如下所示；

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

CSS是这样的；

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

Answer 6

这适用于Chrome（2022）：

tr {
    page-break-inside: avoid;
}

它将防止在分页符中拆分表行。