Vermeiden Sie Seitenumbrüche in der Tabellenzeile

97

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.

Ankit Mittal
quelle
1
Entschuldigung, was ist das Problem bei der Verwendung page-break-inside: avoid;?
Christian
2
@ChristianVarga, wenn ich Seitenumbruch verwende: Vermeiden Sie mit tr, es funktioniert nicht
Ankit Mittal
1
Die Seite, die mit Tabellen bricht, ist ziemlich fehlerhaft. Schauen Sie sich diese JavaScript- Problemumgehung
Jona
2
Eigentlich habe ich es page-break-inside:avoidmit allen Tabellenelementen wie tr td versucht, aber es hat nicht funktioniert.
Ankit Mittal
3
Yay Google für WebGL, blendendes schnelles Javascript, tragbarer nativer Client, aber wir können immer noch keine Datentabellen drucken. Wer müsste das machen ??? Nur so gut wie jedes Unternehmen auf der Welt. Übrigens habe ich gerade versucht, eine Tabelle in Google Docs zu drucken, und mein Chrome stürzt dadurch ständig ab. Ich denke, Google Docs druckt per PDF. : /
Sam Watkins

Antworten:

74

Sie können dies mit CSS versuchen:

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

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.

Troy Alford
quelle
18
Leider funktioniert dies (noch) nicht mit Webkit-basierten Browsern.
Attila Fulop
2
Ja - es gibt einige Kuriositäten. Weitere Informationen finden Sie in der Antwort von @ Peter in dieser Frage: stackoverflow.com/questions/7706504/… .
Troy Alford
3
Es funktioniert nur, wenn Sie die gesamte Tabelle nehmen, nicht nur tr / td: stackoverflow.com/a/13525758/729324
marcovtwout
1
Ich habe in IE8 Probleme damit, möglicherweise auch in anderen, wo die gesamte Tabelle versucht, auf eine Seite zu passen, und jeglichen Überlauf abschneidet. Es schien auch die Option "Scale to Fit" für diese Tabellen zu ignorieren.
Tom Pietrosanti
6
@AttilaFulop Immer noch? Ihr Beitrag ist 3 Jahre alt und ich kann ihn immer noch nicht zum Laufen bringen. Danke
Relipse
32

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:

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

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.

Aaron Hill
quelle
Das margin: 4px 0 4px 0;hat den Trick für mich gemacht, ich habe gelegentlich einen Rekord verloren. Danke
Wartodust
Ein Problem bei diesem Ansatz besteht darin, dass manchmal nur wenige Zellen einer Zeile auf die nächste Seite verschoben werden, obwohl jede Zelle für sich nicht beschädigt wird.
WorldSEnder
@WorldSEnder Ja. Haben Sie eine Lösung dafür gefunden?
Ranjansaga
4
Funktioniert nicht Nichts funktioniert. Ich habe jede "Lösung" im Internet ausprobiert und es gibt keine Lösung. Wir müssen nur Mist-Software akzeptieren, die nicht einmal eine Tabelle rendern kann.
Niklas R.
17

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

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

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:

table{
    border-collapse:collapse;
}

und für den td:

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

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!

Jason Silver
quelle
sein gelöstes Problem der Schneidetischreihe sein Bruch anderes Design
aviboy2006
9

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

Richard Pursehouse
quelle
Dieser js-Hack funktioniert, wenn ich nur eine Webseite ohne wkhtmltopdf drucken möchte.
120196
Dies ist der einzige, der für mich gearbeitet hat. Funktioniert auch mit HTML-PDF-Bibliothek.
Gilbert-v
8

Ich habe das folgende JavaScript basierend auf der Antwort von Aaron Hill geschrieben:

//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" />');
    }
});

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

 .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 */
  }

Dies scheint in der neuesten Version von Chrome gut zu funktionieren.

Aaron Newton
quelle
1
Ich rendere große Tabellen mit wkhtmltopdf in das PDF-Format, und dies ist die einzige Lösung, die akzeptable Ergebnisse liefert. Es könnte besser sein (Webkit wiederholt die Zellränder nach einem Seitenumbruch nicht), aber zumindest der Inhalt ist vorhanden. Vielen Dank!
Jonathon Hill
7

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

Troy Morehouse
quelle
1
Dies funktioniert besser als der Rest für mich unter Chromium Version 40.0.2214.111 (64-Bit) unter Arch Linux. Es ist hässlich und fühlt sich hackig an - aber anscheinend sind mehrere tbodyElemente in einem table stackoverflow.com/questions/3076708/…
ElDog
Dies funktioniert bei mir nicht (Chrome 56.0.2924.87 (64-Bit), Mac OS 10.12.2).
Nhat Dinh
4

Versuche es mit

white-space: nowrap; 

Stil zu td, um zu vermeiden, dass es auf neuen Linien bricht.

vinayakshukre
quelle
1
Viel einfacher als die anderen Lösungen. Ist das eine neue Sache?
Bendecko
3

Ich habe festgestellt, dass dies page-break-inside: avoidnicht funktioniert, wenn eines der übergeordneten Elemente der Tabelle display: inline-blockoder ist flex. Stellen Sie sicher, dass alle übergeordneten Elemente vorhanden sind display: block.

Sehen Sie sich auch überschreiben table, tr, td‚s displaymit CSS - Stile gridfür die Druck - Layout , wenn Sie halten Probleme mit dem Tisch haben.

Stephen Saucier
quelle
2

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.

table,
tr,
td,
div {
    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.

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