避免在表格的行内分页
我希望避免在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，以避免它在新的线路上打破。
