避免在表格行内部分页跨页打印 有大用

我发现在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和其中的任何内容都不会。

我使用@AaronHill上面的4px技巧（链接）它工作得很好！ 我使用了一个更简单的css规则，而不需要为每个添加一个类 <td> 在表中。

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

我根据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中运行良好。

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

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

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

试试吧

white-space: nowrap; 

风格到td，以避免它在新线上打破。

我找到了解决这个问题的新方法，至少对我来说（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解决问题！