Saya ingin menghindari jeda halaman di dalam baris tabel di html, ketika saya mengonversi html ke PDF oleh wkhtmltopdf. Saya menggunakan page-break-inside: hindari dengan tabel- berfungsi, tetapi saya memiliki begitu banyak baris, lalu tidak berfungsi. Jika mengatur tampilan tr sebagai blok atau hal lain maka itu mengubah format tabel dan memasukkan batas ganda. Atau dimungkinkan untuk menyisipkan header tabel di setiap halaman, di mana tabel itu dipisahkan.

Anda dapat mencoba ini dengan 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>

Kebanyakan aturan CSS tidak berlaku untuk <tr>tag secara langsung, karena persis seperti yang Anda tunjukkan di atas - mereka memiliki displaygaya yang unik , yang tidak mengizinkan aturan CSS ini. Namun, <td>dan <th>tag di dalamnya biasanya melakukan memungkinkan semacam ini spesifikasi - dan Anda dapat dengan mudah menerapkan aturan tersebut untuk SEMUA anak- <tr>'s dan <td>' s menggunakan CSS seperti yang ditunjukkan di atas.

Cara terbaik yang saya temukan untuk mengatasi masalah ini di browser webkit adalah dengan meletakkan div di dalam setiap elemen td dan menerapkan page-break-inside: hindari gaya ke div, seperti ini:

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

Meskipun Chrome seharusnya tidak mengenali 'page-break-inside: hindari;' properti, ini tampaknya menjaga konten baris agar tidak terbagi menjadi dua oleh jeda halaman saat menggunakan wktohtml untuk menghasilkan PDF. Elemen tr mungkin menggantung sedikit di atas halaman, tetapi div dan apa pun di dalamnya tidak.

Saya menggunakan trik 4px oleh @AaronHill di atas ( tautan ) dan itu bekerja dengan sangat baik! Saya menggunakan aturan css yang lebih sederhana tanpa perlu menambahkan kelas ke masing-masing <td>dalam tabel.

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

Saya telah menemukan cara baru untuk mengatasi masalah ini, setidaknya untuk saya (Versi Chrome 63.0.3239.84 (Build Resmi) (64-bit) di MacOS Sierra)

Tambahkan aturan CSS ke tabel induk:

table{
    border-collapse:collapse;
}

dan untuk td:

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

Saya benar-benar menemukan solusi ini di Stack Overflow, tetapi tidak muncul dalam pencarian Google awal: CSS untuk menghentikan jeda halaman di dalam baris tabel

Kudos to @ Ibrennan208 karena telah memecahkan masalah!

Menggunakan CSS page-break-inside tidak akan berfungsi (ini adalah masalah browser webkit).

Ada peretasan pemisahan tabel JavaScript wkhtmltopdf yang memecah tabel panjang menjadi tabel yang lebih kecil secara otomatis tergantung pada ukuran halaman yang Anda tentukan (daripada pemecah halaman setelah nilai statis x baris): https://gist.github.com/3683510

Saya menulis JavaScript berikut berdasarkan jawaban 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" />');
    }
});

Di mana dontSplit adalah kelas tabel di mana Anda tidak ingin td terpecah menjadi halaman. Gunakan ini dengan CSS berikut (sekali lagi, dikaitkan dengan 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 */
  }

Ini tampaknya berfungsi dengan baik di versi terbaru Chrome.

Satu-satunya cara yang saya temukan untuk berfungsi adalah dengan menempatkan setiap elemen TR di dalam elemen TBODY itu sendiri, dan menerapkan aturan jeda halaman ke elemen TBODY melalui css

Coba dengan

white-space: nowrap; 

gaya ke td agar tidak melanggar baris baru.

Saya telah menemukan bahwa page-break-inside: avoidtidak akan berfungsi jika salah satu elemen induk tabel adalah display: inline-blockatau flex. Pastikan semua elemen indukdisplay: block .

Juga pertimbangkan override table, tr, td's displaygaya dengan CSS griduntuk layout cetak jika Anda terus mengalami masalah dengan meja.

Solusi 2020

Satu-satunya hal yang dapat saya lakukan secara konsisten di semua browser adalah meletakkan setiap baris di dalam elemen tabelnya sendiri . Ini juga berfungsi dengan node HTML-PDF. Kemudian atur semuanya ke page-break-inside: avoid.

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

Satu-satunya kelemahan dari ini adalah Anda harus mengatur lebar kolom secara manual, jika tidak maka akan terlihat agak aneh. Berikut ini bekerja dengan baik untuk saya dengan dua kolom.

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

Contoh

<table>
  <tr>
    <td>Forename</td>
    <td>John</td>
  </tr>
</table>
<table>
  <tr>
    <td>Surname</td>
    <td>Piper</td>
  </tr>
</table>
<table>
  <tr>
    <td>Website</td>
    <td>desiringgod.org</td>
  </tr>
</table>

Ini adalah pertanyaan lama tetapi saya mengalami kesalahan yang sama baru-baru ini. Masalah dalam kasus saya terkait dengan table-responsivekelas Bootstrap , yang tidak sengaja digunakan<table> elemen.

Jadi, jika Anda mengalami masalah yang sama, coba hapus table-responsivedari <table>kelas saat memanggil wkhtmltopdf.