打印大型 HTML 表格时如何处理分页符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1763639/
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 deal with page breaks when printing a large HTML table
提问by h3.
I have a project which requires printing an HTML table with many rows.
我有一个项目需要打印一个多行的 HTML 表格。
My problem is the way the table is printed over multiple page. It will sometimes cut a row in half, making it unreadable because one half is on the bleeding edge of a page and the remainder is printed on the top of the next page.
我的问题是表格打印在多页上的方式。它有时会将一行切成两半，使其无法阅读，因为一半位于页面的边缘，其余部分打印在下一页的顶部。
The only plausible solution I can think of is using stacked DIVs instead of a table and force page-breaks if needed.. but before going through the whole change I thought I could ask here before.
我能想到的唯一可行的解决方案是使用堆叠的 DIV 而不是表格，并在需要时强制分页……但在进行整个更改之前，我想我可以先在这里问一下。
回答by Sinan ünür
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tbody>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
回答by Josh P
Note: when using the page-break-after:always for the tag it will create a page break after the last bit of the table, creating an entirely blank page at the end every time! To fix this just change it to page-break-after:auto. It will break correctly and not create an extra blank page.
注意：当使用 page-break-after:always 标签时，它会在表格的最后一位之后创建一个分页符，每次都在最后创建一个完全空白的页面！要解决此问题，只需将其更改为 page-break-after:auto。它会正确地中断并且不会创建额外的空白页。
<html>
<head>
<style>
@media print
{
table { page-break-after:auto }
tr { page-break-inside:avoid; page-break-after:auto }
td { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
}
</style>
</head>
<body>
....
</body>
</html>
回答by vicenteherrera
Expanding from Sinan ünür solution:
从思南ünür扩展解决方案：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
table { page-break-inside:auto }
div { page-break-inside:avoid; } /* This is the key */
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<tr>
<td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
It seems that page-break-inside:avoidin some browsers is only taken in consideration for block elements, not for cell, table, row neither inline-block.
似乎page-break-inside:avoid在某些浏览器中只考虑了块元素，而不考虑单元格、表格、行和内联块。
If you try to display:blockthe TRtag, and use there page-break-inside:avoid, it works, but messes around with your table layout.
如果您尝试display:block了TR代码，并使用那里page-break-inside:avoid，它的工作原理，但周围混乱与表格的布局。
回答by MDave
None of the answers here worked for me in Chrome. AAverin on GitHub has created some useful Javascript for this purposeand this worked for me:
在 Chrome 中，这里的所有答案都不适合我。GitHub 上的 AAverin 为此创建了一些有用的 Javascript，这对我有用：
Just add the js to your code and add the class 'splitForPrint' to your table and it will neatly split the table into multiple pages and add the table header to each page.
只需将 js 添加到您的代码中并将类“splitForPrint”添加到您的表格中，它就会将表格整齐地拆分为多个页面并将表格标题添加到每个页面。
回答by marcgg
回答by Wendel Tavares
I recently solved this problem with a good solution.
我最近用一个很好的解决方案解决了这个问题。
CSS:
CSS:
.avoidBreak {
border: 2px solid;
page-break-inside:avoid;
}
JS:
JS：
function Print(){
$(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width", $(this).width() + "px") });
$(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
window.print();
}
Works like a charm!
奇迹般有效！
回答by Aaron
I ended up following @vicenteherrera's approach, with some tweaks (that are possibly bootstrap 3 specific).
我最终遵循了@vicenteherrera 的方法，并进行了一些调整（可能是 Bootstrap 3 特有的）。
Basically; we can't break trs, or tds because they're not block-level elements. So we embed divs into each, and apply our page-break-*rules against the div. Secondly; we add some padding to the top of each of these divs, to compensate for any styling artifacts.
基本上; 我们不能打断trs 或tds 因为它们不是块级元素。因此，我们将divs嵌入到每个中，并将我们的page-break-*规则应用于div. 其次; 我们在每个 div 的顶部添加了一些填充，以补偿任何样式伪影。
<style>
@media print {
/* avoid cutting tr's in half */
th div, td div {
margin-top:-8px;
padding-top:8px;
page-break-inside:avoid;
}
}
</style>
<script>
$(document).ready(function(){
// Wrap each tr and td's content within a div
// (todo: add logic so we only do this when printing)
$("table tbody th, table tbody td").wrapInner("<div></div>");
})
</script>
The margin and padding adjustments were necessary to offset some kind of jitter that was being introduced (by my guess - from bootstrap). I'm not sure that I'm presenting any new solution from the other answers to this question, but I figure maybe this will help someone.
边距和填充调整对于抵消正在引入的某种抖动（根据我的猜测 - 来自引导程序）是必要的。我不确定我是否从这个问题的其他答案中提出了任何新的解决方案，但我认为这可能会对某人有所帮助。
回答by Jay
I faced the same problem and search everywhere for a solution, at last, I fount something which works for me for every browsers.
我遇到了同样的问题并到处寻找解决方案，最后，我找到了适用于每个浏览器的东西。
html {
height: 0;
}
use this css or Instead of css you can have this javascript
使用这个 css 或者你可以使用这个 javascript 代替 css
$("html").height(0);
Hope this will work for you as well.
希望这对你也有用。
回答by Zenon K.
I checked many solutions and anyone wasn't working good.
我检查了许多解决方案，但没有人工作得很好。
So I tried a small trick and it works:
所以我尝试了一个小技巧，它奏效了：
tfoot with style:position: fixed; bottom: 0px;is placed at the bottom of last page, but if footer is too high it is overlapped by content of table.
tfoot with style:position: fixed; bottom: 0px;放置在最后一页的底部，但如果页脚太高，则会与表格内容重叠。
tfoot with only: display: table-footer-group;isn't overlapped, but is not on the bottom of last page...
tfoot with only:display: table-footer-group;不重叠，但不在最后一页的底部...
Let's put two tfoot:
让我们放两个 tfoot：
TFOOT.placer {
display: table-footer-group;
height: 130px;
}
TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}<TFOOT class='placer'>
<TR>
<TD>
<!-- empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>One reserves place on non-last pages, second puts in your accual footer.
第一个在非最后一页保留位置，第二个放在您的实际页脚中。
回答by Ananth Doss
I've tried all suggestions given above and found simple and working cross browser solution for this issue. There is no styles or page break needed for this solution. For the solution, the format of the table should be like:
我已经尝试了上面给出的所有建议，并找到了针对此问题的简单且有效的跨浏览器解决方案。此解决方案不需要样式或分页符。对于解决方案，表的格式应如下所示：
<table>
<thead> <!-- there should be <thead> tag-->
<td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
</thead>
<tbody><!---<tbody>also must-->
<tr>
<td>data</td>
</tr>
<!--100 more rows-->
</tbody>
</table>
Above format tested and working in cross browsers
以上格式经过测试并在跨浏览器中工作
