如何在需要时添加分页符

Question

我有以下代码，其中包含许多动态性的表：

<div>
    <table>
        <tr></tr>
        <tr></tr>
        ...
    </table>  
    <table>
        <tr></tr>
        <tr></tr>
    </table>
 ...more tables
</div> 

当我使用javascript / jquery打印div元素时，一些表格会在中间切割。

我尝试使用CSS（page-break-after / page-break-before），但后来我将每个表放在单独的页面中。

另外，每个桌子的高度因人而异，所以我们事先无法知道桌子的高度！

有没有办法在需要时打破页面？只是为了防止分裂？

Answer 1

在 CSS ：

中添加以下内容

要求：避免在桌子/行内打破

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

您可以阅读更多here

Answer 2

请尝试以下规则：

table { 
  display:block; 
  page-break-inside:auto;
}
tr { 
  page-break-inside:avoid; 
  page-break-after:auto; 
}