2020解决方案

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技巧（link）并且效果非常好！我使用了一个更简单的css规则，而无需为表中的每个<td>添加一个类。

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

Answer 4

我根据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 5

使用CSS page-break-inside不起作用（这是一个webkit浏览器问题）。

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

Answer 6

我找到了解决此问题的新方法，至少对我来说（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 to stop page break inside of table row

感谢@ Ibrennan208解决问题！

Answer 7

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

Answer 8

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>

Answer 9

尝试

$( document ).ready()

样式到td以避免它在新行上破坏。

Answer 10

我发现，如果表的任何父元素是page-break-inside: avoid或display: inline-block，flex将无法正常工作。确保所有父元素均为display: block。

如果表格仍然存在问题，请考虑使用CSS table用CSS tr覆盖td，display，grid的{{1}}样式，以CSS combineLatest

Answer 11

这是一个老问题，但我最近也遇到了同样的错误。就我而言，该问题与Bootstrap的table-responsive类有关，该类被意外地用在<table>元素上。

因此，如果您遇到相同的问题，请在调用wkhtmltopdf时尝试从table-responsive类中删除<table>。

避免在表格行内部分页

11 个答案:

2020解决方案

示例