JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table">
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr><tr class="row">
<td>Text</td>
</tr>
<tr class="row">
<td>Text</td>
</tr>
</table>
CSS
table {
page-break-inside: auto;
position: relative;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
@media print {
table {
page-break-inside:auto;
position:relative;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
}