How to avoid page break inside tr?

Question

How to avoid page break inside <tr>?

(ANGULAR PROJECT) I have table (PrimeNG table) and I want to avoid break after print page. I use Chromium/Chrome browse. After print I have this result:

So, how to avoid this, or how to disable repeat thead?

I tried this links, but dosen't work:

How to avoid page break inside table row for wkhtmltopdf

"page-break-inside: avoid "- does not work

avoid page break inside row of table

Hmm do you have a working code snippet? Maybe it is because your font-size is to big... — marcramser, Sep 25 '18 at 11:18

score 2 · Answer 1 · answered Sep 25 '18 at 11:17

2

I have same problem. This combination helped me

@media print {
    html, body {
        width: 210mm;
        height: auto;
    }

    body {
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }

    p, img, a, div.image, div{
        page-break-inside: avoid;
    }

    table, thead, tbody, tr, td, th, label, strong{
        page-break-inside: auto;
    }
}

answered Sep 25 '18 at 11:17

Jogi

98
2
8

try to add `@page {size: A4;}` – Jogi Apr 23 '19 at 10:55

score 0 · Answer 2 · answered Mar 27 '20 at 22:38

The following is what worked in Chrome to:

Prevent table cell contents from being split across a page break.
Prevent table rows from having arbitrary vertical gaps between them a few rows after each page break.

@media print {
  tr, td {
    break-after: auto;
    break-inside: auto;
    line-height: 1;
  }
}

How to avoid page break inside tr?

2 Answers2