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.
html
css
wkhtmltopdf
Ankit Mittal
sumber
sumber
page-break-inside: avoid;
?page-break-inside:avoid
dengan semua elemen tabel seperti tr td, tetapi tidak berhasil.Jawaban:
Anda dapat mencoba ini dengan CSS:
Kebanyakan aturan CSS tidak berlaku untuk
<tr>
tag secara langsung, karena persis seperti yang Anda tunjukkan di atas - mereka memilikidisplay
gaya 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.sumber
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:
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.
sumber
margin: 4px 0 4px 0;
berhasil bagi saya, saya terkadang kehilangan rekor. Terima kasihSaya 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.sumber
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:
dan untuk td:
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!
sumber
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
sumber
Saya menulis JavaScript berikut berdasarkan jawaban Aaron Hill:
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):
Ini tampaknya berfungsi dengan baik di versi terbaru Chrome.
sumber
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
sumber
tbody
elemen valid di dalamtable
stackoverflow.com/questions/3076708/…Coba dengan
gaya ke td agar tidak melanggar baris baru.
sumber
Saya telah menemukan bahwa
page-break-inside: avoid
tidak akan berfungsi jika salah satu elemen induk tabel adalahdisplay: inline-block
atauflex
. Pastikan semua elemen indukdisplay: block
.Juga pertimbangkan override
table
,tr
,td
'sdisplay
gaya dengan CSSgrid
untuk layout cetak jika Anda terus mengalami masalah dengan meja.sumber
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
.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.
Contoh
sumber
Ini adalah pertanyaan lama tetapi saya mengalami kesalahan yang sama baru-baru ini. Masalah dalam kasus saya terkait dengan
table-responsive
kelas Bootstrap , yang tidak sengaja digunakan<table>
elemen.Jadi, jika Anda mengalami masalah yang sama, coba hapus
table-responsive
dari<table>
kelas saat memanggil wkhtmltopdf.sumber