我在网页中有一个动态表格,有时会包含很多行。我知道有page-break-before
和page-break-after
CSS属性。
我该把它们放在代码的哪个位置,以便在需要时强制分页?
我在网页中有一个动态表格,有时会包含很多行。我知道有page-break-before
和page-break-after
CSS属性。
我该把它们放在代码的哪个位置,以便在需要时强制分页?
您可以使用以下代码:
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
请查阅W3C的CSS打印规范以获取更多详细信息。
同时,请参考Salesforce开发者论坛。
在想要应用页面分隔符的位置,无论是 table
还是 tr
,都需要添加一个类例如 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">
并且它将按照您的要求工作
或者,您也可以使用相同的div
结构:
CSS:
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}
分割线:
<div class="page-break"></div>
tr
打破。 - Avatar我已经寻找了这个问题的解决方法。我有一个jquery mobile网站,有一个最终打印页面,它将几十个页面组合在一起。我尝试了上面提到的所有修复方法,但是我能做到的唯一一件事就是这个:
<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div>
<div style="clear:both!important;"/> </div>
不幸的是,以上示例在Chrome浏览器中对我无效。
我想出了以下解决方案,您可以指定每个页面的最大高度(以像素为单位)。当行数达到该高度时,表格将被拆分成单独的表格。
$(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();
});
div.tablePage {
page-break-inside:avoid; page-break-after:always;
}
<div style="break-inside: avoid;">
中,但没有效果。直到我发现这个链接:https://dev59.com/t2ox5IYBdhLWcg3wTypx#27209406,重新思考了我的逻辑,并将不想拆分的内容放在<tbody>
中。请注意保留HTML标签。<table>
<thead style="display: table-header-group;">
<tr>
<th></th>
</tr>
</thead>
-- Repeating content --
<tbody style="break-inside: avoid;">
-- First row from group --
<tr>
<td> Only shown once per group </td>
</tr>
-- Repeating rows --
<tr>
<td> Shown multiple times per group </td>
</tr>
</tbody>
<tbody>
的表格,但这是完全可以接受的,因为许多人使用这种精确模式来组合行。这是适用于我的情况:
<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>
来自这个帖子:避免表格行内分页
我最终意识到,我的大量内容溢出了表格并且无法正确分页,其实根本不需要放在表格中。
虽然这不是一个技术性的解决方案,但当我不再需要表格时,结束表格并开始新的表格来制作页脚,这解决了我的问题。
希望能对某些人有所帮助...祝好运!
.row-item:nth-child(20n) {
page-break-after: always;
page-break-inside: avoid;
}
我们尝试了这里和其他地方提到的许多不同的解决方案,但都没有为我们工作。然而,最终我们找到了一个对我们有效的解决方案,对我们来说似乎是一个 Angular 问题。我不明白为什么这样做有效,但对我们来说确实有效,最终我们不需要任何页面分页的 CSS。
@media print {
ng-component {
float: left;
}
}
希望这能帮助到其他人,因为我们花了几天时间来解决这个问题。
<style>
.my-table {
page-break-before: always;
page-break-after: always;
}
.my-table tr {
page-break-inside: avoid;
}
</style>
或者直接在元素上:
<table style="page-break-before: always; page-break-after: always;">
<tr style="page-break-inside: avoid;">
..
</tr>
</table>