The best way I've found to handle this in webkit browsers is to place a div inside each td element and apply the page-break-inside: avoid style to the div like this:
... <td> <div class="avoid"> 單元格內(nèi)容。 </div> </td> ... <style type="text/css"> .avoid { page-break-inside: avoid !important; margin: 4px 0 4px 0; /* 為了避免頁面斷開太接近div內(nèi)的文本 */ } </style>
Although Chrome reportedly does not recognize the 'page-break-inside: avoid;' attribute, this appears to prevent line content from being split in half by page breaks when generating PDFs using wktohtml. The tr element may break slightly beyond the page, but the div and anything inside it will not.
You can try to use CSS:
<table class="print-friendly"> <!-- 這里是你的表格的其余部分 --> </table> <style> table.print-friendly tr td, table.print-friendly tr th { page-break-inside: avoid; } </style>
Most CSS rules cannot be applied directly to <tr>
tags because as you pointed out above - they have unique display
styles that do not allow these CSS rules. However, the <td>
and <th>
tags usually allow for this specification - you can easily apply these rules to all children using the CSS in the example above ##<tr> and
<td>.