Podczas drukowania tabeli, chrom i safari przecinają rząd na pół

Question

Nie mam tego problemu z IE9, Firefoksem i Operą. Tylko Chrome i Safari.

Podczas drukowania strony, jeśli istnieje tabela, która musi zostać przerwana w pewnym momencie, aby kontynuować na następnej stronie, Safari i Chrome obcinają wiersz na pół i drukują górną połowę na pierwszej stronie i na dole połowa na drugiej stronie.

Oto kod, który próbowałem użyć, który rozwiązał problem, który miałem z IE9 - drukowanie małego obrazu o wymiarach 50 x 50 pikseli w każdym rzędzie na następnej stronie z tekstem na pierwszej stronie.

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

Mam 7 stron z różną liczbą rzędów średnio około 10-15 rzędów. Co mogę zrobić, aby rozwiązać ten problem?

Używam PHP foreach do utworzenia tabeli z tablicy, więc raczej nie będę musiał edytować tego kodu, aby zachować spójność między stronami.

Answer 1

Sprawdź te Raporty o błędach Webkit Bug report

Webkit newer Bug report referencing to the one above.

Answer 2

Oto przykład z tabeli, która pozwala jedynie podziały stron między rzędami. To powinno działać w którymś z popularnych przeglądarek desktopowych, w tym tych opartych na silniku 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> 

Niestety, wymaga stałej wysokości na zawartość komórek, co prawdopodobnie pozwoli to bezużyteczne dla większości ludzi, którzy przychodzą w tym poście.

Można to zrobić bez ustawiania stałej wysokości zawartości, ale jest to zaskakująco skomplikowane. Sprawdź moją odpowiedź w this post, aby zobaczyć, jak to się robi.