Quando si stampa un tavolo, chrome e safari stanno tagliando una riga a metà

Question

Non ho questo problema con IE9, Firefox e Opera. Solo Chrome e Safari.

Quando si stampa una pagina, se c'è un tavolo che deve essere rotto a un certo punto per continuare nella pagina successiva, Safari e Chrome taglieranno la riga a metà e stamperanno la metà superiore sulla prima e la parte inferiore metà sulla seconda pagina.

Ecco il codice che stavo cercando di utilizzare e che ha risolto un problema che avevo con IE9 - stampando una piccola immagine 50px x 50px in ogni riga nella pagina successiva con il testo sulla prima pagina.

table { page-break-inside:auto } 
tr { page-break-inside:avoid; page-break-after:auto } 

Ho 7 pagine con quantità variabili di file in media intorno a 10-15 righe. Cosa posso fare per risolvere questo problema?

E utilizzo PHP foreach per creare la tabella da un array, quindi preferirei non dover modificare quel codice in modo da poterlo mantenere coerente tra le pagine.

Answer 1

Guarda anche questi bug report Webkit Bug report

Webkit newer Bug report referencing to the one above.

Answer 2

Ecco un esempio di una tabella che consente solo le interruzioni di pagina tra le righe. Dovrebbe funzionare in uno dei browser desktop popolari, tra cui quelli basati su WebKit ...

<style> 
    table { 
    border-spacing: 0; 
    line-height: 1.25em; 
    } 
    table > tbody > tr > td {padding: 0;} 
    table > tbody > tr:first-child > td > div {border-top: 2px solid black;} 
    table > tbody > tr > td:first-child > div {border-left: 2px solid black;} 
    table > tbody > tr > td > div { 
    page-break-inside: avoid; 
    display: inline-block; 
    vertical-align: top; 
    height: 3.75em; 
    border-bottom: 2px solid black; 
    border-right: 2px solid black; 
    } 
</style> 

<table> 
    <tr> 
    <td><div>Content</div></td> 
    <td><div>Multi-<br/>line<br/>content</div></td> 
    </tr> 
    <tr> 
    <td><div>Content</div></td> 
    <td><div>Multi-<br/>line<br/>content</div></td> 
    </tr> 
</table> 

Purtroppo, richiede un altezza fissa sul contenuto delle cellule, che probabilmente renderà inutile la maggior parte delle persone che vengono attraverso questo post.

È possibile disattivarlo senza impostare un'altezza del contenuto fissa, ma è sorprendentemente complicato. Controlla la mia risposta in this post per vedere come è fatto.