Voglio evitare interruzioni di pagina all'interno della riga della tabella in html, quando converto html in PDF da wkhtmltopdf. Io uso page-break-inside: evita con table- funziona, ma ho così tante righe, quindi non funziona. Se imposta la visualizzazione di tr come blocco o qualcos'altro, cambia la formattazione della tabella e inserisce il doppio bordo. Oppure è possibile inserire l'intestazione della tabella in ogni pagina, dove la tabella è stata suddivisa.

Potresti provare con 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>

La maggior parte delle regole CSS non si applicano <tr>direttamente ai tag, proprio per quello che hai indicato sopra: hanno uno displaystile unico , che non consente queste regole CSS. Tuttavia, l' <td>e <th>tag al loro interno di solito fanno permettere questo tipo di specifica - e si può facilmente applicare tali norme a TUTTI bambino- <tr>'s e <td>' s usando i CSS come indicato sopra.

Il modo migliore che ho trovato per affrontare questo problema nei browser webkit è inserire un div all'interno di ogni elemento td e applicare il page-break-inside: evita lo stile al div, in questo modo:

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

Anche se Chrome presumibilmente non riconosce il "page-break-inside: evitare;" proprietà, questo sembra impedire che il contenuto della riga venga diviso a metà da un'interruzione di pagina quando si utilizza wktohtml per generare PDF. L'elemento tr potrebbe rimanere un po 'sospeso sull'interruzione di pagina, ma il div e qualsiasi cosa al suo interno non lo faranno.

Ho usato il trucco 4px di @AaronHill sopra ( link ) e ha funzionato davvero bene! Ho usato però una regola CSS più semplice senza dover aggiungere una classe a ciascuna <td>nella tabella.

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

Ho trovato un nuovo modo per risolvere questo problema, almeno per me (Chrome versione 63.0.3239.84 (versione ufficiale) (64 bit) su MacOS Sierra)

Aggiungi una regola CSS alla tabella genitore:

table{
    border-collapse:collapse;
}

e per il td:

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

In realtà ho trovato questa soluzione su Stack Overflow, ma non è stata visualizzata nelle ricerche iniziali di Google: CSS per interrompere l'interruzione di pagina all'interno della riga della tabella

Complimenti a @ Ibrennan208 per aver risolto il problema!

L'utilizzo dell'interruzione di pagina CSS all'interno non funzionerà (questo è un problema del browser webkit).

Esiste un hack di suddivisione della tabella JavaScript wkhtmltopdf che suddivide automaticamente una tabella lunga in tabelle più piccole a seconda delle dimensioni della pagina specificate (anziché interruzioni di pagina dopo un valore statico di x righe): https://gist.github.com/3683510

Ho scritto il seguente JavaScript basato sulla risposta di 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" />');
    }
});

Dove dontSplit è la classe della tabella in cui non vuoi che i td si dividano tra le pagine. Usalo con il seguente CSS (di nuovo, attribuito ad 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 */
  }

Sembra funzionare bene nell'ultima versione di Chrome.

L'unico modo che ho trovato per funzionare è stato quello di posizionare ogni elemento TR all'interno del proprio elemento TBODY e applicare le regole di interruzione di pagina all'elemento TBODY tramite css

Prova con

white-space: nowrap; 

stile a td per evitare che si rompa su nuove righe.

Ho scoperto che page-break-inside: avoidnon funzionerà se uno qualsiasi degli elementi principali della tabella è display: inline-blocko flex. Assicurati che tutti gli elementi principali lo siano display: block.

Considera anche l'override table, tr, td's displaystili con i CSS gridper il layout di stampa, se si continua ad avere problemi con la tavola.

La soluzione 2020

L'unica cosa che potrei ottenere costantemente per funzionare su tutti i browser è inserire ogni riga all'interno del proprio elemento di tabella . Funziona anche con il nodo HTML-PDF. Quindi imposta tutto su page-break-inside: avoid.

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

L'unico svantaggio di questo è che devi impostare manualmente la larghezza delle colonne, altrimenti sembra piuttosto strano. Quanto segue ha funzionato bene per me con due colonne.

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

Esempio

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

Questa è una vecchia domanda, ma di recente ho riscontrato lo stesso errore. Il problema nel mio caso era correlato alla table-responsiveclasse di Bootstrap , che veniva utilizzata accidentalmente su <table>element.

Quindi, se hai lo stesso problema, prova a rimuovere table-responsivedalla <table>classe quando chiami wkhtmltopdf.