如何应用CSS分页符来打印包含大量行的表？

Question

我的网页中有一个动态表,有时包含很多行.我知道有page-break-before和page-break-afterCSS属性.如果需要,我在哪里将它们放入我的代码中以强制分页？

Answer 1

您可以使用以下内容:

<style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

有关详细信息,请参阅W3C的CSS打印配置文件规范.

还可以参考Salesforce开发人员论坛.

Answer 2

无论你想在哪里申请休息,要么是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:

<div class="page-break"></div>

Answer 3

我已经四处寻找解决方案.我有一个jquery移动网站,它有一个最终的打印页面,它结合了几十页.我尝试了上面的所有修复,但我唯一可以工作的是:

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>

Answer 4

不幸的是,上面的例子在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;            
    }