I want to add border in the middle of table break when printing, is it possible? I've search everywhere but found nothing.
Table header/footer or page-break-inside: avoid; is not helping at all, because the table will just not break and leave so much empty space, like this:
So i want it still break-inside but with border on top and bottom for every page, like this:
To something like this:
<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>
Most CSS rules don't apply to <tr> tags directly, because of exactly what you pointed out above - they have a unique display style, which doesn't allow for these CSS rules. However, the <td> and <th> tags within them usually do allow this kind of specification - and you can easily apply such rules to ALL child-<tr>'s and <td>'s using CSS as shown above.
Credit goes to: Troy Alford
Other Sources:
avoid page break inside row of table
How to avoid splitting an HTML table across pages
How to apply CSS page-break to print a table with lots of rows?
https://www.geeksforgeeks.org/how-to-apply-css-page-break-to-print-a-table-with-lots-of-rows/
