89

我的网页中有一个动态表，有时包含很多行。我知道有page-break-before和page-break-afterCSS 属性。为了在需要时强制分页，我应该将它们放在我的代码中的什么位置？

4

9 回答 9

152

您可以使用以下内容：

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

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

并参考Salesforce 开发者论坛。

于 2012-01-03T13:06:41.897 回答
23

无论您想在哪里申请休息，无论是 atable还是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>
于 2012-10-17T12:49:29.403 回答
15

我四处寻找解决此问题的方法。我有一个 jquery 移动网站，它有一个最终打印页面，它结合了几十个页面。我尝试了上面的所有修复，但我唯一可以开始工作的是：

<div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>
于 2013-06-28T22:11:09.747 回答
8

不幸的是，上面的例子在 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;            
    }
于 2014-08-18T16:29:50.607 回答
1

这对我有用：

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

从这个线程：避免在表格行内分页

于 2017-10-18T22:19:44.393 回答
0

如果您知道页面上需要多少个，则可以随时执行此操作。它将在每 20 个项目后开始一个新页面。

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}
于 2018-10-11T13:02:41.663 回答
0

我最终意识到，我的大量内容溢出表格并且没有正确破坏，甚至不需要在表格内。

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

希望它可以帮助某人......祝你好运！

于 2020-04-01T07:35:24.787 回答
-1

这是一个例子：

通过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>
于 2012-01-03T13:09:18.440 回答
-4

你应该使用

<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; }
于 2019-07-17T09:47:55.687 回答