1

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:

Screenshot 1

So i want it still break-inside but with border on top and bottom for every page, like this:

Screenshot 2

To something like this:

Screenshot 3

faid
  • 375
  • 1
  • 4
  • 19

2 Answers2

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

Stefano
  • 224
  • 4
  • 7
  • No, it's not about that, it still don't have border while page breaking, it should break but have border at the same time – faid Apr 17 '21 at 19:32
0

As a partial solution- we've added two divs.

First with

position:absolute;
top:0; /*some margin*/ 
bottom:0;/*some margin*/ 
left:0;
right:0;
border-top:1px solid #fff;
border-bottom:1px solid #000; 
z-index:1001;

And the second with

position:fixed;
top:0;/*some margin*/ 
bottom:0;/*some margin*/ 
left:0;
right:0;
border-top:1px solid #000;
border-bottom:1px solid #000; 
z-index:1000;

The second div is displayed on all pages, while the first one is displayed only on the first page. Because of lesser z-index the "fixed" div's upper border is hidden. So the the first page was got rid of upper border, while others had the upper and the bottom borders. Still - we was unable to remove the bottom border on the last page and were forced to set up pdf footer to make it look nice

vlad
  • 112
  • 11