避免表格行內分頁的方法

Question

我想在將HTML轉換為PDF時，透過wkhtmltopdf避免表格行內的分頁。我使用了page-break-inside:avoid與table，它能夠工作，但是當有很多行時就不起作用了。 如果將的display設定為block或其他方式，那麼會改變表格的格式，並插入雙重邊框。 或者可以在每個頁面上插入表格的表頭，以便在表格被分割時顯示。

Answer 1

我發現在webkit瀏覽器中處理這個問題的最佳方法是在每個td元素內放置一個div，並將page-break-inside: avoid樣式應用於div，如下所示：

...
<td>
  <div class="avoid">
    单元格内容。
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* 为了避免页面断开太接近div内的文本 */
  }
</style>

儘管Chrome據說不識別'page-break-inside: avoid;'屬性，但使用wktohtml產生PDF時，這似乎可以防止行內容被頁面斷開分成兩半。 tr元素可能會稍微超出頁面斷開，但div和其內部的任何內容都不會。

Answer 2

你可以嘗試使用CSS來實作：

<table class="print-friendly">
 <!-- 这里是你的表格的其余部分 -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

大多數CSS規則不能直接應用於<tr>標籤，因為正如你上面指出的那樣-它們具有獨特的display樣式，不允許這些CSS規則。然而，其中的<td>和<th>標籤通常允許這種規範-你可以使用上面範例中的CSS輕鬆地將這些規則應用於所有子<tr>和<td>。