我的网页中有一个动态表,该表有时包含很多行。我知道有page-break-before
和page-break-after
CSS属性。为了在需要时强制分页,应将它们放在代码中的什么位置?
我的网页中有一个动态表,该表有时包含很多行。我知道有page-break-before
和page-break-after
CSS属性。为了在需要时强制分页,应将它们放在代码中的什么位置?
Answers:
您可以使用以下内容:
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
</style>
有关详细信息,请参考W3C的CSS打印配置文件规范。
还可以参考Salesforce开发人员论坛。
无论您要在哪里暂停,无论是table
或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">
它会按照您的要求工作
或者,您也可以具有div
相同的结构:
CSS:
@media all {
.page-break { display: none; }
}
@media print {
.page-break { display: block; page-break-before: always; }
}
分区:
<div class="page-break"></div>
tr
在Chrome v64中都无法正常工作。
我到处寻找解决方法。我有一个jquery移动网站,该网站具有最终的打印页面,并且包含数十个页面。我尝试了上面的所有修复程序,但我唯一能做的就是:
<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div>
<div style="clear:both!important;"/> </div>
不幸的是,以上示例在Chrome中不适用于我。
我提出了以下解决方案,您可以在其中指定每页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();
});
您还需要样式表中的以下内容
div.tablePage {
page-break-inside:avoid; page-break-after:always;
}
这为我工作:
<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>
从这个线程:避免在表的行内分页
最终,我意识到我的大量内容溢出了表并且没有适当地破坏,甚至根本不需要放在表中。
尽管这不是一个技术解决方案,但它解决了我的问题,当我不再需要桌子时,只需结束桌子即可。然后为页脚开始一个新的页脚。
希望它可以帮助某人...祝你好运!
这是一个例子:
通过css:
<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>
你应该用
<tbody>
<tr>
first page content here
</tr>
<tr>
..
</tr>
</tbody>
<tbody>
next page content...
</tbody>
和CSS:
tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }