Chcę uniknąć podziału strony w wierszu tabeli w html, kiedy konwertuję HTML na PDF za pomocą wkhtmltopdf. Używam łamania strony wewnątrz: unikaj z tabelą - to działa, ale mam tak wiele wierszy, więc nie działa. Jeśli ustawisz wyświetlanie tr jako blok lub coś innego, zmieni to formatowanie tabeli i wstawia podwójne obramowanie. Lub możliwe jest wstawienie nagłówka tabeli na każdej stronie, na której tabela została podzielona.
html
css
wkhtmltopdf
Ankit Mittal
źródło
źródło
page-break-inside: avoid;
?page-break-inside:avoid
ze wszystkimi elementami tabeli, takimi jak tr td, ale nie zadziałało.Odpowiedzi:
Możesz spróbować tego z CSS:
Większość reguł CSS nie ma
<tr>
bezpośredniego zastosowania do tagów, z powodu dokładnie tego, co wskazałeś powyżej - mają unikalnydisplay
styl, który nie pozwala na te reguły CSS. Jednak<td>
i<th>
tagi w nich zwykle zrobić umożliwiają tego rodzaju specyfikacji - i można łatwo zastosować takie reguły do wszystkich idealny dla całych<tr>
„S<td>
” s za pomocą CSS, jak pokazano powyżej.źródło
Najlepszym sposobem, w jaki znalazłem rozwiązanie tego problemu w przeglądarkach webkit, jest umieszczenie elementu div wewnątrz każdego elementu td i zastosowanie podziału strony wewnątrz: unikaj stylu w elemencie div, na przykład:
Mimo że Chrome podobno nie rozpoznaje polecenia „page-break-inside: unikaj”; wydaje się, że zapobiega to dzieleniu zawartości wiersza na pół przez podział strony podczas używania wktohtml do generowania plików PDF. Element tr może nieco wisieć nad stroną zepsutą, ale element div i wszystko w jego wnętrzu nie.
źródło
margin: 4px 0 4px 0;
Wystarczyły mi, traciłem rekord od czasu do czasu. DziękiUżyłem sztuczki 4px autorstwa @AaronHill powyżej ( link ) i zadziałała naprawdę dobrze! Użyłem jednak prostszej reguły css bez konieczności dodawania klasy do każdej z nich
<td>
w tabeli.źródło
Znalazłem nowy sposób rozwiązania tego problemu, przynajmniej dla mnie (wersja Chrome 63.0.3239.84 (oficjalna kompilacja) (64-bitowa) na MacOS Sierra)
Dodaj regułę CSS do tabeli nadrzędnej:
a dla td:
Właściwie znalazłem to rozwiązanie w Stack Overflow, ale nie pojawiło się w początkowych wyszukiwaniach Google: CSS, aby zatrzymać podział strony w wierszu tabeli
Uznanie dla @ Ibrennan208 za rozwiązanie problemu!
źródło
Używanie CSS do dzielenia strony nie zadziała (jest to problem z przeglądarką Webkit).
Istnieje hack wkhtmltopdf JavaScript do dzielenia tabel, który automatycznie dzieli długą tabelę na mniejsze tabele w zależności od określonego rozmiaru strony (zamiast dzielenia strony po statycznej wartości x wierszy): https://gist.github.com/3683510
źródło
Napisałem następujący JavaScript na podstawie odpowiedzi Aarona Hilla:
Gdzie dontSplit to klasa tabeli, w której nie chcesz, aby td dzieliło się na strony. Użyj tego z następującym CSS (ponownie przypisanym Aaronowi Hillowi):
Wygląda na to, że działa dobrze w najnowszej wersji Chrome.
źródło
Jedynym sposobem, w jaki udało mi się zadziałać, było umieszczenie każdego elementu TR wewnątrz jego własnego elementu TBODY i zastosowanie reguł podziału strony do elementu TBODY za pośrednictwem css
źródło
tbody
elementów jest prawidłowych wtable
stackoverflow.com/questions/3076708/ ...Spróbuj z
style do td, aby uniknąć zrywania nowych linii.
źródło
Znalazłem to
page-break-inside: avoid
to nie zadziała, jeśli którykolwiek z elementów nadrzędnych tabeli todisplay: inline-block
lubflex
. Upewnij się, że wszystkie elementy nadrzędne sądisplay: block
.Weź również pod uwagę nadrzędne
table
,tr
,td
„sdisplay
style CSSgrid
dla układu wydruku, jeśli trzymać problemy z tabeli.źródło
Rozwiązanie 2020
Jedyną rzeczą, którą mogłem konsekwentnie pracować we wszystkich przeglądarkach, jest umieszczenie każdego wiersza we własnym elemencie tabeli . Działa to również z węzłem HTML-PDF. Następnie ustaw wszystko na
page-break-inside: avoid
.Jedyną wadą jest to, że musisz ręcznie ustawić szerokość kolumn, w przeciwnym razie wygląda to dość dziwnie. Poniższe działały dobrze dla mnie z dwiema kolumnami.
Przykład
źródło
To jest stare pytanie, ale ostatnio wpadłem w ten sam błąd. Problem w moim przypadku był związany z
table-responsive
klasą Bootstrap , która została przypadkowo użyta na<table>
elemencie.Jeśli więc masz ten sam problem, spróbuj usunąć
table-responsive
z<table>
zajęć podczas wywoływania wkhtmltopdf.źródło