避免在表格行内部分页

Question

当我通过wkhtmltopdf将html转换为PDF时,我想避免在html中的表行内部分页.我使用page-break-inside:避免使用table-它的工作,但是我有很多行,然后没有工作.如果将tr的显示设置为块或其他内容,则会更改表的格式并插入双边框.或者可以在分割表的每个页面上插入表头.

Answer 1

您可以尝试使用CSS:

<table class="print-friendly">
 <!-- The rest of your table here -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

大多数CSS规则不<tr>直接应用于标签,因为您完全按照上面的指示 - 它们具有独特的display样式,不允许这些CSS规则.然而,<td>和<th>在其中的标签通常这样做允许这种规格的-你可以很容易地把这些规则应用到所有儿童安全<tr>的和<td>的使用CSS,如上图所示.

Answer 2

我发现在webkit浏览器中处理这个问题的最好方法是在每个td元素中放入一个div并应用page-break-inside:避免使用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>

即使Chrome认为不能识别'page-break-inside:avoid;' 在使用wktohtml生成PDF时,这似乎可以防止行内容被分页.tr元素可能会暂停在分页符上,但div和其中的任何内容都不会.

Answer 3

我使用@AaronHill上面的4px技巧(链接),它工作得非常好!我使用了一个更简单的css规则,而不需要<td>在表中为每个添加一个类.

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

Answer 4

我找到了解决这个问题的新方法,至少对我来说(MacOS Sierra上的Chrome版本63.0.3239.84(官方版本)(64位))

将CSS规则添加到父表:

table{
    border-collapse:collapse;
}

而对于td:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

我实际上在Stack Overflow上找到了这个解决方案,但它没有出现在最初的Google搜索中: CSS停止表格行内的分页

感谢@ Ibrennan208解决问题!

Answer 5

我发现page-break-inside: avoid如果表的任何父元素是display: inline-blockor ，这将不起作用flex。确保所有父元素都是display: block.

如果表格一直有问题，还可以考虑使用 CSS覆盖table, tr,td的display样式以grid用于打印布局。

Answer 6

使用CSS page-break-inside不起作用(这是一个webkit浏览器问题).

有一个wkhtmltopdf JavaScript表拆分黑客根据你指定的页面大小自动将长表分成较小的表(而不是在x行的静态值后分页):https://gist.github.com/3683510

Answer 7

我根据Aaron Hill的回答编写了以下JavaScript:

//Add a div to each table cell so these don't break across pages when printed
//See http://stackoverflow.com/a/17982110/201648
$(document).ready(function () {
    var ctlTd = $('.dontSplit td');
    if (ctlTd.length > 0)
    {
        //console.log('Found ctlTd');
        ctlTd.wrapInner('<div class="avoidBreak" />');
    }
});

其中dontSplit是表格的类,您不希望td在页面之间分割.使用以下CSS(再次归因于Aaron Hill):

 .avoidBreak {
    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 */
  }

这似乎在最新版本的Chrome中运行良好.

Answer 8

我发现工作的唯一方法是将每个TR元素放在它自己的TBODY元素中,并通过css将分页规则应用于TBODY元素

Answer 9

尝试用

white-space: nowrap; 

样式为 td 以避免它在新行上中断。

Answer 10

2020 年的解决方案

我能在所有浏览器上始终如一地工作的唯一一件事就是将每一行放在它自己的表元素中。这也适用于节点 HTML-PDF。然后只需将所有内容设置为page-break-inside: avoid.

table,
tr,
td,
div {
    page-break-inside: avoid;
}

这样做的唯一缺点是必须手动设置列的宽度，否则看起来很奇怪。以下两列对我来说效果很好。

td:first-child { width: 30% }
td:last-child { width: 70% }

例子

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>