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

我的网页中有一个动态表，有时包含很多行。我知道CSS属性之前有

分页符

和之后有

分页符。
如果需要，我应该将它们放在代码中的什么位置以强制断页？
您可以使用以下方法：

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


表{内部分页符：自动}
tr{内部分页符：避免；后面分页符：自动}

有关详细信息，请参阅W3C规范

另请参阅。
以下是一个示例：

通过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>


..
无论您想在哪里应用分页符，无论是
表格
还是
tr
，都需要使用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">

分区：

我已经四处寻找解决方法。我有一个jquery移动站点，它有一个最终的打印页面，它包含几十个页面。我尝试了上面所有的修复，但我唯一能做的是：

<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();

});

这对我有用：

<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>


细胞含量。
...
.避免{
内部分页符：避免！重要；
边距：4px 0 4px 0；/*以防止分页符与div中的文本过于接近*/
}

从这个帖子：
如果你知道你想在一页上写多少，你可以一直这样做。它将在每20项之后开始一个新页面

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}

你应该使用

<tbody> 
  <tr>
  first page content here 
  </tr>
  <tr>
  ..
  </tr>
</tbody>
<tbody>
  next page content...
</tbody>

我最终意识到，我的大量内容溢出了桌子，没有正确地打破，根本不需要放在桌子里

虽然这不是一个技术解决方案，但它解决了我的问题，当我不再需要一张桌子时，简单地结束桌子；然后开始为页脚创建一个新的页脚

希望它能帮助别人。。。祝你好运
 这成功地使用了4个页面作为一个2页的表格，并且似乎与Safari（6）和Chrome（24）中没有css的效果相同。如果您在bootstrap这样的框架中尝试这一点，请注意使用.spanX（带有浮点的样式）可能会破坏分页符-*属性，我自己为这一细微差别浪费了很多时间。这适用于UIWebView，因此我认为这也适用于Safari Now。David感谢分享与Safari或charome一起使用的解决方案。JonEasy您可以使用David的解决方案，以防此解决方案与Safari不兼容@马克森斯很高兴这有帮助。抱歉，我几个月没有活动，所以无法提前作出反应。这个解决方案不会在细胞边界之间破坏多行细胞，而是在中间分裂它们。不过，我找到了一个解决方案，它适用于所有当前浏览器（Safari、FF和Chrome）：@sai如果几年前提供了这个答案，那么它可能不符合浏览器的新版本。但是你可能会从中得到一些提示，这只有在你提前知道一个页面可以容纳多少行的情况下才有效（因为你必须直接在你的标记中声明分页符）。如果表行中的数据可能会换行到第二行，那么这可能很困难（或不可能）。那么多页大小（A4、美国字母、美国法律）又如何呢？当我使用多行单元格和多列时，这种解决方案不适用于我。我找到了解决办法，不过：-它也处理了@aapierce提到的问题。在Chrome v64中也无法使中断的
tr
工作。当表格有一个大行时，它不会做任何事情。手动将表格划分为多个页面不是一个很好的解决方案，除非内容应该自然地打印在单独的页面上（例如，财务信息每年打印一页。）您事先不知道一页打印的内容能容纳多少内容。这在某种程度上起作用。意味着它停止在底部的行中剪切数据。该行仍在剪切。但至少比实际问题好。这对我不起作用：（我使用的是CHOME 83.0.4103.116，如果html放在两个TR标签（CHROME）之间，这是在表中工作的。如果html放在两个TR标签（FIREFOX）之间，这不是在表中工作的。在FileFox work CSS Rule->table TR:n子（10）{之后分页符：始终；内部分页符：避免；}
<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;
}

<tbody> 
  <tr>
  first page content here 
  </tr>
  <tr>
  ..
  </tr>
</tbody>
<tbody>
  next page content...
</tbody>

tbody { display: block; page-break-before: avoid; }
tbody { display: block; page-break-after: always; }