Html 如何应用 CSS 分页符来打印包含大量行的表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8712677/
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 apply CSS page-break to print a table with lots of rows?
提问by Mohammad Saberi
I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-beforeand page-break-afterCSS properties.
Where do I put them in my code in order to force page breaking if needed?
我的网页中有一个动态表，有时包含很多行。我知道有page-break-before和page-break-afterCSS 属性。如果需要，我将它们放在我的代码中的什么位置以强制分页？
回答by Hemant Metalia
You can use the following:
您可以使用以下内容：
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
Refer the W3C's CSS Print Profilespecification for details.
有关详细信息，请参阅 W3C 的CSS 打印配置文件规范。
And also refer the Salesforce developer forums.
并参考Salesforce 开发者论坛。
回答by Aditya P Bhatt
Wherever you want to apply a break, either a tableor tr, you needs to give a class for ex. page-breakwith CSS as mentioned below:
无论您想在哪里休息，无论是 atable还是tr，您都需要为 ex 上课。page-break使用 CSS 如下所述：
/* class works for table row */
table tr.page-break{
page-break-after:always
}
<tr class="page-break">
/* class works for table */
table.page-break{
page-break-after:always
}
<table class="page-break">
and it will work as you required
它会按照你的要求工作
Alternatively, you can also have divstructure for same:
或者，您也可以具有div相同的结构：
CSS:
CSS：
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}
Div:
分区：
<div class="page-break"></div>
回答by Scotty Rogers
I have looked around for a fix for this. I have a jquery mobile site that has a final print page and it combines dozens of pages. I tried all the fixes above but the only thing I could get to work is this:
我已经四处寻找解决方法。我有一个 jquery 移动网站，它有一个最终的打印页面，它结合了几十个页面。我尝试了上述所有修复，但我唯一可以开始工作的是：
<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div>
<div style="clear:both!important;"/> </div>
回答by Jay
Unfortunately the examples above didn't work for me in Chrome.
不幸的是，上面的例子在 Chrome 中对我不起作用。
I came up with the below solution where you can specify the max height in PXs of each page. This will then splits the table into separate tables when the rows equal that height.
我想出了以下解决方案，您可以在其中指定每个页面的 PX 中的最大高度。当行等于该高度时，这会将表格拆分为单独的表格。
$(document).ready(function(){
var MaxHeight = 200;
var RunningHeight = 0;
var PageNo = 1;
$('table.splitForPrint>tbody>tr').each(function () {
if (RunningHeight + $(this).height() > MaxHeight) {
RunningHeight = 0;
PageNo += 1;
}
RunningHeight += $(this).height();
$(this).attr("data-page-no", PageNo);
});
for(i = 1; i <= PageNo; i++){
$('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");
var rows = $('table tr[data-page-no="' + i + '"]');
$('#Table' + i).find("tbody").append(rows);
}
$('table.splitForPrint').remove();
});
You will also need the below in your stylesheet
您的样式表中还需要以下内容
div.tablePage {
page-break-inside:avoid; page-break-after:always;
}
回答by Alan
this is working for me:
这对我有用：
<td>
<div class="avoid">
Cell content.
</div>
</td>
...
<style type="text/css">
.avoid {
page-break-inside: avoid !important;
margin: 4px 0 4px 0; /* to keep the page break from cutting too close to the text in the div */
}
</style>
From this thread: avoid page break inside row of table
从这个线程：避免在表格行内分页
回答by quemeful
If you know about how many you want on a page, you could always do this. It will start a new page after every 20th item.
如果您知道页面上需要多少个，您可以随时执行此操作。它将在每 20 个项目后开始一个新页面。
.row-item:nth-child(20n) {
page-break-after: always;
page-break-inside: avoid;
}
回答by AdheneManx
I eventually realised that my bulk content that was overflowing the table and not breaking properly simply didn't even need to be inside a table.
我最终意识到我的大量内容溢出桌子并且没有正确分解，甚至不需要放在桌子里面。
While it's not a technical solution, it solved my problem to simply end the table when I no longer needed a table; then started a new one for the footer.
虽然这不是技术解决方案，但它解决了我不再需要桌子时简单地结束桌子的问题；然后为页脚开始了一个新的。
Hope it helps someone... good luck!
希望它可以帮助某人......祝你好运！
回答by tomthorgal
Here is an example:
下面是一个例子：
Via css:
通过CSS：
<style>
.my-table {
page-break-before: always;
page-break-after: always;
}
.my-table tr {
page-break-inside: avoid;
}
</style>
or directly on the element:
或直接在元素上：
<table style="page-break-before: always; page-break-after: always;">
<tr style="page-break-inside: avoid;">
..
</tr>
</table>
回答by Joris
You should use
你应该使用
<tbody>
<tr>
first page content here
</tr>
<tr>
..
</tr>
</tbody>
<tbody>
next page content...
</tbody>
And CSS:
和 CSS：
tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }
