如何应用CSS分页打印有很多行的表？
我在我的网页有一个dynamic的表，有时包含大量的行。 我知道CSS属性中有page-break-before和page-break-after 。 我在哪里把它们放在我的代码中，以便在需要时强制分页？
您可以使用以下内容：
<style type="text/css"> table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } </style>
有关详细信息，请参阅W3C的CSS打印configuration文件规范。
还请参阅Salesforce开发人员论坛 。
无论你想要rest一下，无论是table还是tr ，你都需要给ex做一个课。 如下所述，用CSS page-break
/* 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：
<div class="page-break"></div>
不幸的是，上面的例子在Chrome中并不适合我。
我想出了下面的解决scheme，你可以在每个页面的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; }
我已经四处寻找解决这个问题。 我有一个jQuery的手机网站，有一个最终的打印页面，它结合了几十页。 我尝试了上面的所有修复，但唯一可以工作的是这样的：
<div style="clear:both!important;"/></div> <div style="page-break-after:always"></div> <div style="clear:both!important;"/> </div>
这是为我工作：
<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>
