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

【问题标题】：How to achieve page break in HTML table for Google Chrome?如何在谷歌浏览器的 HTML 表格中实现分页？
【发布时间】：2013-07-20 11:12:55
【问题描述】：

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

这个功能有效，所以我搜索并得到了这个链接 Google Chrome Printing Page Breaks

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

 -webkit-region-break-inside: avoid;

但是当我运行并检查元素时，默认情况下它会被描边。

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

【问题讨论】：

如果您可以使用 www.jsbin.com 发布示例，它将帮助任何提出建议的人。
我已经编辑了问题。
@S.A.Rahman 我的回答有帮助吗？
@MohammadAreebSiddiqui 你检查过我之前的代码吗？我尝试了你所描述的，但那对我有用。请检查我的代码并告诉我是否有任何问题。
我终于解决了这个问题。我制作了`tr{display:block;}`，然后我修复了单元格间距。分页符仅适用于块级元素。

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

你是如何修复单元格间距的？

【解决方案2】：

正如MDN所说：

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

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

page-break-after CSS 属性在当前元素。

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

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

避免： 避免在元素之后分页。

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

右：在元素之后强制分页，以便将下一页格式化为正确的页面。

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

break-after CSS 属性描述页面、列或区域的方式生成框后中断行为。如果没有生成框，该属性被忽略。

【讨论】：

你检查过我之前的代码吗？我尝试了你所描述的，但那对我有用。请检查我的代码并告诉我是否有任何问题。
我终于解决了这个问题。我制作了`tr{display:block;}`，然后我修复了单元格间距。分页符仅适用于块级元素。

【解决方案3】：

您可能需要将表格拆分为多个部分，并将它们的page-break-after css 属性设置为always。这有效（使用 beta Chrome），我不知道是否有办法在连续表中做到这一点。

【讨论】：

你不能每 x 行插入一个拆分吗？服务器端还是客户端？使用一些 CSS 技巧，可能没有明显的区别。
我不确定行内容，因为少数行可能包含比其他行更多的数据。所有行的大小都不是问题。
您仍然可以通过猜测获得更好的结果。
我终于解决了这个问题。我做了tr{display:block;} 然后我固定了单元格间距。分页符仅适用于块级元素。
你是如何修复单元格间距的？

【解决方案4】：

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

【讨论】：

我是个新手，这听起来希腊语和拉丁语。能不能简单解释一下。
我终于解决了这个问题。我制作了` tr{display:block;} `，然后我修复了单元格间距。分页符仅适用于块级元素。

【解决方案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;
    }

【讨论】：