jQuery 如何在 Google Chrome 的 HTML 表格中实现分页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17761646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to achieve page break in HTML table for Google Chrome?
提问by sarsarahman
I am trying to print a large table generated with jQuery in an HTML page. I am using Chrome 26.0.141. The issue is with page break.
我正在尝试在 HTML 页面中打印使用 jQuery 生成的大表。我正在使用 Chrome 26.0.141。问题在于分页符。
i initially used this css
我最初使用这个 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}
this dint worked so i searched and got this link Google Chrome Printing Page Breaks
这个功能有效，所以我搜索并得到了这个链接 Google Chrome Printing Page Breaks
based on one of the answer in that link i am using the following CSS attribute
基于该链接中的答案之一，我正在使用以下 CSS 属性
-webkit-region-break-inside: avoid;
But when I run and inspect the element, it is stroked out by default.
但是当我运行并检查元素时，它默认被描边。
What would be the solution? There are lot of posts I searched. They say that recent versions don't support page break. If it's true then what other solution is there to achieve page break in Google Chrome?
解决办法是什么？我搜索了很多帖子。他们说最近的版本不支持分页。如果这是真的，那么还有什么其他解决方案可以在 Google Chrome 中实现分页？
回答by sarsarahman
Finally I resolved this issue. I made tr{display:block;}and then I fixed the cell spacing.
最后我解决了这个问题。我做了tr{display:block;}然后我固定了单元格间距。
Page break only works on block level elements.
分页符仅适用于块级元素。
回答by sabof
You might need to split the table into several parts, and set their page-break-aftercss property to always. This works (with beta Chrome), I don't know if there is a way to do it in a continuous table.
您可能需要将表格拆分为几个部分，并将它们的page-break-aftercss 属性设置为always. 这有效（使用 beta Chrome），我不知道是否有办法在连续表中做到这一点。
回答by Mohammad Areeb Siddiqui
As said on MDN:
正如MDN 上所说：
WebKit browsers doesn't support this property; but some have the non-standard -webkit-column-break-after and -webkit-region-break-after with similar parameters as page-break-after.
WebKit 浏览器不支持此属性；但有些具有非标准的 -webkit-column-break-after 和 -webkit-region-break-after 与 page-break-after 类似的参数。
So you need to use page-break-afterwith some value which suits you the best. Here are some of them:
所以你需要使用page-break-after一些最适合你的值。这里是其中的一些：
The page-break-after CSS property adjusts page breaks after the current element.
page-break-after CSS 属性调整当前元素之后的分页符。
auto:Initial value. Automatic page breaks (neither forced nor forbidden).
自动：初始值。自动分页符（既不强制也不禁止）。
always:Always force page breaks after the element.
always：总是在元素之后强制分页。
avoid:Avoid page breaks after the element.
避免：避免在元素之后分页。
left:Force page breaks after the element so that the next page is formatted as a left page.
left：在元素后强制分页，以便下一页格式化为左页。
right:Force page breaks after the element so that the next page is formatted as a right page.
right：在元素之后强制分页，以便下一页格式化为正确的页面。
You can also use the break-afterproperty:
您还可以使用该break-after属性：
The break-after CSS property describes how the page, column or region break behavior after the generated box. If there is no generated box, the property is ignored.
break-after CSS 属性描述了页面、列或区域在生成的框之后如何中断行为。如果没有生成的框，则忽略该属性。
回答by Christopher Hart
I have provided a few patches to qt to improve table page breaks. You may wish to check out issue 168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13
我已经为 qt 提供了一些补丁来改进表格分页符。您可能希望查看问题 168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13
回答by Mahib
I've used something like several tables to make this thing happen as @sabof mentioned. Say I wanted 11 rows should come on the page.
正如@sabof 所提到的，我已经使用了类似几个表格的东西来使这件事发生。假设我想要 11 行应该出现在页面上。
<table>
11 * <tr></tr>
</table>
<table>
11 * <tr></tr>
</table>
HTML markups;
HTML 标记；
<div id="printSection">
<div>
</div>
</div>
I created rows dynamically so the JQuery logic were the following;
我动态创建了行，因此 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 were something like this;
CSS 是这样的；
#printSection table {
page-break-after: always;
page-break-inside: avoid;
break-inside: avoid;
}
