避免在表格的行内分页

我希望避免在HTML表格中的页面中断,当我通过wkhtmltopdf将HTML转换为PDF。 我使用page-break-inside:避免使用表格 – 它的工作,但是我有很多行,然后不工作。 如果将tr设置为block或其他东西,则改变表格的格式并插入双边框。 或者可以在表格分割的每个页面上插入表格标题。

你可以试试这个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>标签通常允许这样的规范 – 您可以使用CSS轻松地将这些规则应用于所有child- <tr><td>如上所示。

我发现在webkit浏览器中处理这个问题的最好方法是在每个td元素中放入一个div,并将div-in-inside:avoid样式应用于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> 

尽pipeChrome据说不承认“页面中断:避免;” 属性,当使用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 ; } } 

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

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

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

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

尝试

 white-space: nowrap; 

风格来TD,以避免它在新的线路上打破。