Ich möchte einen Seitenumbruch innerhalb der Tabellenzeile in HTML vermeiden, wenn ich HTML von wkhtmltopdf in PDF konvertiere. Ich verwende den Seitenumbruch: Vermeiden Sie es, wenn Tabellen funktionieren, aber ich habe so viele Zeilen, dass sie dann nicht funktionieren. Wenn Sie die Anzeige von tr als Block oder etwas anderes festlegen , wird die Formatierung der Tabelle geändert und ein doppelter Rand eingefügt. Oder Sie können den Tabellenkopf auf jeder Seite einfügen, auf der die Tabelle aufgeteilt wurde.
html
css
wkhtmltopdf
Ankit Mittal
quelle
quelle
page-break-inside: avoid;
?page-break-inside:avoid
mit allen Tabellenelementen wie tr td versucht, aber es hat nicht funktioniert.Antworten:
Sie können dies mit CSS versuchen:
Die meisten CSS-Regeln gelten nicht
<tr>
direkt für Tags, da Sie genau darauf hingewiesen haben, dass sie eindeutig sinddisplay
Stil, der diese CSS-Regeln nicht zulässt. Die jedoch<td>
und<th>
Tags in ihnen in der Regel tun , diese Art von Spezifikation erlauben - und Sie können leicht solche Regeln auf alle kinder- gelten<tr>
‚s und<td>
‘ s mit CSS wie oben gezeigt.quelle
Der beste Weg, um dieses Problem in Webkit-Browsern zu lösen, besteht darin, in jedes td-Element ein div einzufügen und den Seitenumbruch anzuwenden: Vermeiden Sie den Stil auf das div wie folgt:
Auch wenn Chrome angeblich das "Seitenumbruch-Innere: Vermeiden" nicht erkennt; Eigenschaft, dies scheint zu verhindern, dass der Zeileninhalt durch einen Seitenumbruch in zwei Hälften geteilt wird, wenn wktohtml zum Generieren von PDFs verwendet wird. Das tr-Element hängt möglicherweise etwas über dem Seitenumbruch, das div und alles darin jedoch nicht.
quelle
margin: 4px 0 4px 0;
hat den Trick für mich gemacht, ich habe gelegentlich einen Rekord verloren. DankeIch habe den 4px-Trick von @AaronHill oben ( Link ) verwendet und er hat wirklich gut funktioniert! Ich habe jedoch eine einfachere CSS-Regel verwendet, ohne dass jeder
<td>
in der Tabelle eine Klasse hinzugefügt werden muss .quelle
Ich habe einen neuen Weg gefunden, um dieses Problem zu lösen, zumindest für mich (Chrome Version 63.0.3239.84 (Official Build) (64-Bit) unter MacOS Sierra).
Fügen Sie der übergeordneten Tabelle eine CSS-Regel hinzu:
und für den td:
Ich habe diese Lösung tatsächlich bei Stack Overflow gefunden, sie wurde jedoch bei den ersten Google-Suchvorgängen nicht angezeigt: CSS zum Stoppen des Seitenumbruchs innerhalb der Tabellenzeile
Ein großes Lob an @ Ibrennan208 für die Lösung des Problems!
quelle
Die Verwendung von CSS-Seitenumbruch funktioniert nicht (dies ist ein Problem mit dem Webkit-Browser).
Es gibt einen wkhtmltopdf-Hack zum Aufteilen von JavaScript-Tabellen, der eine lange Tabelle abhängig von der angegebenen Seitengröße automatisch in kleinere Tabellen aufteilt (anstatt nach einem statischen Wert von x Zeilen zu brechen): https://gist.github.com/3683510
quelle
Ich habe das folgende JavaScript basierend auf der Antwort von Aaron Hill geschrieben:
Wobei dontSplit die Klasse der Tabelle ist, in der die td nicht über mehrere Seiten aufgeteilt werden sollen. Verwenden Sie dies mit dem folgenden CSS (wiederum Aaron Hill zugeschrieben):
Dies scheint in der neuesten Version von Chrome gut zu funktionieren.
quelle
Die einzige Möglichkeit, die ich gefunden habe, bestand darin, jedes TR-Element in seinem eigenen TBODY-Element zu platzieren und die Seitenumbruchregeln über CSS auf das TBODY-Element anzuwenden
quelle
tbody
Elemente in einemtable
stackoverflow.com/questions/3076708/…Versuche es mit
Stil zu td, um zu vermeiden, dass es auf neuen Linien bricht.
quelle
Ich habe festgestellt, dass dies
page-break-inside: avoid
nicht funktioniert, wenn eines der übergeordneten Elemente der Tabelledisplay: inline-block
oder istflex
. Stellen Sie sicher, dass alle übergeordneten Elemente vorhanden sinddisplay: block
.Sehen Sie sich auch überschreiben
table
,tr
,td
‚sdisplay
mit CSS - Stilegrid
für die Druck - Layout , wenn Sie halten Probleme mit dem Tisch haben.quelle
Die 2020-Lösung
Das einzige, was ich konsequent an allen Browsern arbeiten lassen konnte, ist: jede Zeile in ein eigenes Tabellenelement setzen . Dies funktioniert auch mit dem Knoten HTML-PDF. Dann stellen Sie einfach alles auf
page-break-inside: avoid
.Der einzige Nachteil dabei ist, dass Sie die Breite der Spalten manuell einstellen müssen, sonst sieht es ziemlich seltsam aus. Das Folgende hat bei mir mit zwei Spalten gut funktioniert.
quelle