Wie verwende ich "page-break-inside" für das tbody-Tag?

Ich habe eine HTML-Datei, die ich mit dem Wkhtmltopdf- Tool in PDF konvertiere. Ich verwende page-break-inside: avoidStil, um das Umbrechen von Tabellen in Seiten zu vermeiden (wenn auf der aktuellen Seite kein Platz für die Tabelle vorhanden ist, wird die gesamte Tabelle auf eine neue PDF-Seite verschoben), und es funktioniert hervorragend für Tabellen.

Die Frage ist

Ich habe so einen Tisch

 <table >
 <caption>Payments</caption>
 <tbody>
 <tr>
 <th>line 1</th>
 <td>100.00</td>
 </tr>
 <tr>
 <th>line1 note 1</th>
 <td>120.00</td>
 </tr>
 <tr>
 <th>line1 note 2</th>
 <td>20.00</td>
 </tr>
 </tbody>
 <tbody>
 <tr>
 <th>line 2</th>
 <td>100.00</td>
 </tr>
 <tr>
 <th>line2 note 1</th>
 <td>120.00</td>
 </tr>
 <tr>
 <th>line2 note 2</th>
 <td>20.00</td>
 </tr>
 </tbody>
</table>

Wo jeder Block in einer großen Tabelle enthalten ist, da der Block zu lang und größer als eine PDF-Seite sein kann, möchte ich ihn nach Tbody umbrechen, nicht nach der Tabelle. Ich möchte, dass der neue Tbody-Block auf der neuen Seite beginnt (anstatt innerhalb des Tbody-Blocks zu schneiden), wenn auf der aktuellen Seite kein Platz ist.

Lösung des Problems

Paar Lösungen für das Problem:

1.: Verwenden Sie CSS 1

tbody::before
{
 content: '';
 display: block;
 height: 15px;
}

2.: Verwenden Sie CSS 2

table {
 border-collapse: collapse;
}
table tbody {
 border-top: 15px solid transparent;
}

3.: Verwenden Sie CSS 3

// The first row will have a top padding
table tbody + tbody tr td {
 padding-top: 20px;
}
// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
 padding-top: 0px;
}

4.: Verwenden Sie CSS 4

table tbody{
 display:block;
 margin-bottom:10px;
 border-radius: 5px;
}