Tôi muốn tránh ngắt trang bên trong hàng của bảng trong html, khi tôi chuyển đổi html sang PDF bằng wkhtmltopdf. Tôi sử dụng page-break-inside: tránh với table- nó hoạt động, nhưng tôi có quá nhiều hàng, sau đó không hoạt động. Nếu đặt hiển thị tr dưới dạng khối hoặc một số thứ khác thì nó sẽ thay đổi định dạng của bảng và chèn đường viền đôi. Hoặc có thể chèn tiêu đề bảng trên mỗi trang, nơi bảng đã được tách.

Bạn có thể thử điều này với 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>

Hầu hết các quy tắc CSS không áp dụng <tr>trực tiếp cho các thẻ, vì chính xác những gì bạn đã chỉ ra ở trên - chúng có một displaykiểu duy nhất , điều này không cho phép các quy tắc CSS này. Tuy nhiên, <td>và <th>thẻ trong họ thường làm cho phép loại đặc điểm kỹ thuật - và bạn có thể dễ dàng áp dụng quy tắc đó cho TẤT CẢ từ trẻ <tr>'s và <td>' s sử dụng CSS như trình bày ở trên.

Cách tốt nhất tôi đã tìm thấy để giải quyết vấn đề này trong trình duyệt webkit là đặt một div bên trong mỗi phần tử td và áp dụng kiểu ngắt trang bên trong: tránh cho div, như sau:

...
<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>

Mặc dù Chrome được cho là không nhận dạng được 'page-break-Inside: Tránh;' , điều này dường như giữ cho nội dung hàng không bị chia đôi do ngắt trang khi sử dụng wktohtml để tạo tệp PDF. Phần tử tr có thể treo trên trang ngắt một chút, nhưng div và bất kỳ thứ gì bên trong nó thì không.

Tôi đã sử dụng thủ thuật 4px của @AaronHill ở trên ( liên kết ) và nó hoạt động rất hiệu quả! Tôi đã sử dụng mặc dù một quy tắc css đơn giản hơn mà không cần thêm một lớp vào mỗi <td>trong bảng.

@media print {
    table tbody tr td:before,
    table tbody tr td:after {
        content : "" ;
        height : 4px ;
        display : block ;
    }
}

Tôi đã tìm thấy một cách mới để giải quyết vấn đề này, ít nhất là đối với tôi (Phiên bản Chrome 63.0.3239.84 (Bản dựng chính thức) (64-bit) trên MacOS Sierra)

Thêm quy tắc CSS vào bảng mẹ:

table{
    border-collapse:collapse;
}

và đối với td:

tr td{
    page-break-inside: avoid;
    white-space: nowrap;
}

Tôi thực sự đã tìm thấy giải pháp này trên Stack Overflow, nhưng nó không hiển thị trong các tìm kiếm ban đầu của Google: CSS để dừng ngắt trang bên trong hàng của bảng

Kudos cho @ Ibrennan208 để giải quyết vấn đề!

Sử dụng CSS page-break-inside sẽ không hoạt động (đây là sự cố của trình duyệt webkit).

Có một thủ thuật tách bảng wkhtmltopdf JavaScript tự động chia một bảng dài thành các bảng nhỏ hơn tùy thuộc vào kích thước trang bạn chỉ định (thay vì ngắt trang sau giá trị tĩnh của x hàng): https://gist.github.com/3683510

Tôi đã viết đoạn mã JavaScript sau dựa trên câu trả lời của Aaron Hill:

//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" />');
    }
});

Where dontSplit là lớp của bảng mà bạn không muốn các td bị tách thành các trang. Sử dụng điều này với CSS sau (một lần nữa, được gán cho 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 */
  }

Điều này dường như đang hoạt động tốt trong phiên bản Chrome mới nhất.

Cách duy nhất tôi thấy để hoạt động là đặt mỗi phần tử TR bên trong phần tử TBODY của chính nó và áp dụng quy tắc ngắt trang cho phần tử TBODY thông qua css

Hãy thử với

white-space: nowrap; 

phong cách sang td để tránh nó bị hỏng trên các dòng mới.

Tôi nhận thấy rằng điều đó page-break-inside: avoidsẽ không hoạt động nếu bất kỳ phần tử mẹ nào của bảng là display: inline-blockhoặc flex. Đảm bảo rằng tất cả các phần tử chính display: block.

Cũng xem xét trọng table, tr, td's displayphong cách với CSS gridcho bố cục in nếu bạn tiếp tục gặp vấn đề với bàn.

Giải pháp năm 2020

Điều duy nhất tôi có thể làm việc nhất quán trên tất cả các trình duyệt là đặt mỗi hàng bên trong phần tử bảng của chính nó . Điều này cũng hoạt động với nút HTML-PDF. Sau đó, chỉ cần đặt mọi thứ thành page-break-inside: avoid.

table,
tr,
td,
div {
    page-break-inside: avoid;
}

Điểm bất lợi duy nhất của điều này là bạn phải thiết lập độ rộng của các cột theo cách thủ công, nếu không nó trông khá lạ. Phần sau hoạt động tốt với tôi với hai cột.

td:first-child { width: 30% }
td:last-child { width: 70% }