Html'yi wkhtmltopdf ile PDF'ye dönüştürdüğümde, html'deki tablonun satırında sayfa kırılmasını önlemek istiyorum. Sayfa içi kullanıyorum: tablo işlerinden kaçının, ancak çok fazla satırım var, o zaman çalışmıyor. Tr'nin görüntülenmesini blok veya başka bir şey olarak ayarlarsanız , tablonun biçimlendirmesini değiştirir ve çift kenarlık ekler. Veya tablonun bölündüğü her sayfaya tablo başlığını eklemek mümkündür.

Bunu CSS ile deneyebilirsiniz:

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

Çoğu CSS kuralı <tr>, tam olarak yukarıda belirttiğiniz şey nedeniyle doğrudan etiketlere uygulanmaz - displaybu CSS kurallarına izin vermeyen benzersiz bir stile sahiptirler. Ancak, <td>ve <th>içlerindeki etiketleri genellikle do şartnamenin bu tür izin - ve kolayca ALL için çocuk-tür kural uygulayabilirsiniz <tr>'ler ve <td>yukarıda gösterildiği gibi' ler kullanılarak CSS.

Webkit tarayıcılarında bu sorunu çözmenin en iyi yolu, her td öğesinin içine bir div koymak ve sayfa sonunu uygulamak: div'e stilden kaçının, şunun gibi:

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

Chrome sözde 'page-break-inside: escape;' özelliği, bu, PDF oluşturmak için wktohtml kullanıldığında satır içeriğinin bir sayfa sonu ile ikiye bölünmesini engelliyor gibi görünüyor. Tr öğesi, sayfa sonunun biraz üzerinde asılı kalabilir, ancak div ve içindeki herhangi bir şey olmayacaktır.

Yukarıda @AaronHill'in 4px numarasını kullandım ( bağlantı ) ve gerçekten iyi çalıştı! <td>Tablodaki her birine bir sınıf eklemeye gerek kalmadan daha basit bir css kuralı kullandım .

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

Bu sorunu çözmek için yeni bir yol buldum, en azından benim için (MacOS Sierra'da Chrome Sürümü 63.0.3239.84 (Resmi Yapı) (64-bit))

Üst tabloya bir CSS kuralı ekleyin:

table{
    border-collapse:collapse;
}

ve td için:

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

Aslında bu çözümü Stack Overflow'da buldum, ancak ilk Google aramalarında görünmedi: CSS, tablo satırının içindeki sayfa sonunu durdurmak için

Problemi çözdüğü için @ Ibrennan208'e şeref!

CSS sayfa kırılımını kullanmak işe yaramaz (bu bir webkit tarayıcı sorunudur).

Uzun bir tabloyu belirttiğiniz sayfa boyutuna bağlı olarak otomatik olarak daha küçük tablolara bölen bir wkhtmltopdf JavaScript tablo bölme saldırısı vardır (x satırlık statik bir değerden sonra sayfa kırmak yerine): https://gist.github.com/3683510

Aaron Hill'in cevabına göre aşağıdaki JavaScript'i yazdım:

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

Nerede dontSplit Eğer td en sayfalar arasında bölmek istemiyoruz tablonun sınıftır. Bunu aşağıdaki CSS ile kullanın (yine Aaron Hill'e atfedilir):

 .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 */
  }

Bu, Chrome'un en son sürümünde iyi çalışıyor gibi görünüyor.

Çalışmak için bulduğum tek yol, her bir TR öğesini kendi TBODY öğesine yerleştirmek ve sayfa sonu kurallarını TBODY öğesine css aracılığıyla uygulamaktı.

İle deneyin

white-space: nowrap; 

Yeni satırlarda kırılmayı önlemek için stil td.

page-break-inside: avoidTablonun üst öğelerinden herhangi biri display: inline-blockveya ise bunun işe yaramayacağını buldum flex. Tüm ana öğelerin olduğundan emin olun display: block.

Ayrıca ağır basan düşünün table, tr, td'nin displayCSS ile stil gridbaskı düzeni için sofraya sorunlarınız devam edersek.

2020 çözümü

Tüm tarayıcılarda sürekli olarak çalışabileceğim tek şey, her satırı kendi tablo öğesinin içine koymaktır . Bu aynı zamanda düğüm HTML-PDF ile de çalışır. Sonra her şeyi olarak ayarlayın page-break-inside: avoid.

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

Bunun tek dezavantajı, sütunların genişliğini manuel olarak ayarlamanız gerektiğidir, aksi takdirde oldukça garip görünür. Aşağıdakiler iki sütunla benim için iyi çalıştı.

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

Misal

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

Bu eski bir soru ama son zamanlarda aynı hataya girdim. Benim durumumdaki sorun table-responsive, yanlışlıkla <table>eleman üzerinde kullanılan Bootstrap sınıfıyla ilgiliydi .

Aynı sorunu var ise, kaldırmayı deneyin table-responsivegelen <table>wkhtmltopdf çağrılırken sınıfa.