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.

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.

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.

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

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!

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

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.

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

Versuche es mit

white-space: nowrap; 

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

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.

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