hindari jeda halaman di dalam baris tabel

97

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.

Ankit Mittal
sumber
1
Maaf, apa masalah saat menggunakan page-break-inside: avoid;?
Christian
2
@ChristianVarga ketika saya menggunakan page-break-inside: hindari dengan tr, itu tidak berfungsi
Ankit Mittal
1
Pemecahan halaman dengan tabel cukup bermasalah. Lihat kode
Jona
2
sebenarnya saya telah mencoba page-break-inside:avoiddengan semua elemen tabel seperti tr td, tetapi tidak berhasil.
Ankit Mittal
3
Ya Google untuk WebGL, javascript cepat yang membutakan, klien asli portabel, tetapi kami masih tidak dapat mencetak tabel data. Siapa yang perlu melakukan itu ??? Hanya hampir semua bisnis di dunia. Kebetulan, saya baru saja mencoba mencetak spreadsheet di google docs, dan itu secara konsisten merusak chrome saya. Saya pikir google dokumen mencetak melalui pdf. : /
Sam Watkins

Jawaban:

74

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.

Troy Alford
sumber
18
Sayangnya ini tidak (belum) berfungsi dengan browser berbasis webkit.
Attila Fulop
2
Ya - ada beberapa keanehan. Lihat jawaban @ Peter dalam pertanyaan ini: stackoverflow.com/questions/7706504/… untuk info lebih lanjut.
Troy Alford
3
Ini hanya berfungsi jika Anda mengambil seluruh tabel, tidak hanya tr / td: stackoverflow.com/a/13525758/729324
marcovtwout
1
Saya mengalami masalah dengan ini di IE8, mungkin yang lain, di mana itu menyebabkan seluruh tabel mencoba muat di satu halaman dan memotong luapan apa pun. Tampaknya juga mengabaikan opsi "scale to fit" untuk tabel ini.
Tom Pietrosanti
6
@AttilaFulop Masih? Postingan Anda berumur 3 tahun dan saya masih belum bisa membuatnya berfungsi. Terima kasih
relipse
32

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.

Aaron Hill
sumber
Itu margin: 4px 0 4px 0;berhasil bagi saya, saya terkadang kehilangan rekor. Terima kasih
Wartodust
Masalah dengan pendekatan ini adalah terkadang hanya beberapa sel dari baris yang dipecah ke halaman berikutnya, meskipun setiap selnya sendiri tidak akan rusak.
WorldSEnder
@Ya. Apakah Anda menemukan solusi untuk ini?
ranjansaga
4
Tidak berhasil. Tidak ada yang berhasil. Saya mencoba setiap "solusi" di internet dan tidak ada solusi. Kami hanya perlu menerima perangkat lunak sampah yang bahkan tidak dapat membuat tabel.
Niklas R.
18

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 ;
    }
}
phidias
sumber
10

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!

Jason Silver
sumber
masalah terpecahkan dari meja potong baris istirahat desain lainnya
aviboy2006
9

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

Richard Pursehouse
sumber
Hack js ini akan bekerja jika saya hanya ingin mencetak halaman web tanpa wkhtmltopdf?
120196
Ini adalah satu-satunya yang berhasil untuk saya. Juga bekerja dengan pustaka HTML-PDF.
gilbert-v
8

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.

Aaron Newton
sumber
1
Saya merender tabel besar ke dalam format PDF menggunakan wkhtmltopdf, dan ini adalah satu-satunya solusi yang memberikan hasil yang dapat diterima. Bisa jadi lebih baik (Webkit tidak mengulangi batas sel setelah jeda halaman), tetapi setidaknya kontennya ada di sana. Terima kasih!
Jonathon Hill
7

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

Troy Morehouse
sumber
1
Ini bekerja lebih baik daripada yang lain untuk saya di Chromium Versi 40.0.2214.111 (64-bit) di Arch Linux. Ini jelek dan terasa hacky - tetapi tampaknya beberapa tbodyelemen valid di dalam table stackoverflow.com/questions/3076708/…
ElDog
Ini tidak berfungsi untuk saya (Chrome 56.0.2924.87 (64-bit), Mac OS 10.12.2).
Nhat Dinh
4

Coba dengan

white-space: nowrap; 

gaya ke td agar tidak melanggar baris baru.

vinayakshukre
sumber
1
Jauh lebih sederhana daripada solusi lainnya. Apakah ini hal baru?
bendecko
3

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.

Stephen Saucier
sumber
3

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>
gilbert-v
sumber
Bisakah Anda memberikan contoh HTML tabel? Terima kasih.
PavanBhushan
Terima kasih, @ gilbert-v atas pengeditannya dengan contoh. Saya akan mencoba ini.
PavanBhushan
0

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.

Laerte
sumber