Puppeteer - thead overlapping on page break ONLY when thead is cut off by footer on previous page

Question

What I am trying to do?

I am using Puppeteer to convert raw HTML to PDF. I have saved the HTML code in a file, and I'm reading from that file and converting it to PDF.

What is the problem

The thead is NOT overlapping on every page, NO. It is ONLY overlapping when a thread has multiple rows and half of it gets cut off because of the page break. On the next page, the remainder of the thead is printed ALONG with the overlapped entire thead.

Here is the Output of the converted PDF Overlapping thead

<table id='TblCustomerRating' class='display unbreakable' border='1' cellspacing='0' cellpadding='0'
    style=' width: 100%;border-collapse:collapse;'>
    <thead>
        <tr>
            <th class='Greyheader' align="center" style="padding-top: 5px; padding-bottom: 5px;" colspan="4">Askari
                Cement Limited</th>
        </tr>
        <tr>
            <th class='Greyheader' align="center" style="padding-top: 5px; padding-bottom: 5px;" colspan="4">External
                Rating</th>
        </tr>
        <tr class='Greyheader'>
            <th width="12%" align="center" class='Greyheader'><b> ECAI</b> </th>
            <th width="12%" align="center" class='Greyheader'><b>Long Term</b></th>
            <th width="12%" align="center" class='Greyheader'><b>Short Term</b></th>
            <th style='display:none' width="12%" align="center" class='Greyheader'><b>Rating Date</b></th>
        </tr>
    </thead>
    <tbody>
        <tr id="4" type="data" LT="" ST="" MT="" class=" GreyBorder">
            <td width="10%" agencyCode='4' class='GreyBorder'
                style='background-color:lightgray;text-align: center;padding-top: 5px;padding-bottom: 5px;font-weight: bold;width:10%;'>
                JCR-VIS</td>
            <td width="10%" RsCode='35' class='GreyBorder' align="center">A</td>
            <td width="10%" RsCode='' class='GreyBorder' align="center"></td>
            <td align="center" style='display:none' class='GreyBorder'></td>
        </tr>
    </tbody>
</table><br />

What I have tried?

I have tried adding the following CSS: (it didn't work)

table { overflow: visible !important; } 
thead { display: table-header-group !important; } 
tr { page-break-inside: avoid !important; }

NOTE: I repeat, the overlapping is not occurring when the table rows are cut off from page-break. It is ONLY overlapping when thead is cut off because of the page break. as shown in the image above.

Puppeteer version 1.19.0

Node.js version v16.13.0

npm version 8.1.0

What operating system are you seeing the problem on? Windows

Answer 1

I think I had the same issue. It is when you have a repeating table header (thead { display: table-header-group }) and the table breaks for printing between tr tags within thead. I couldn't find a way to do it with only the break-after, break-before or break-inside properties. This is a bit of a hack, but here is how I fixed it:

:root {
  --header-height: 60px;
}

th {
    break-inside: avoid;
}

thead th::after {
    content: '';
    display: block;
    height: var(--header-height);
    margin-bottom: -var(--header-height);
    break-inside: avoid;
}

The height and negative margin-bottom are equal to the height of the tr elements below the first tr. In my code I just have 60px and -60px hard coded in, but I wanted to be clear that depending on the height of your table header that you will have to change those values. The height creates the size of element that can't be broken inside by a page break and the negative margin-bottom brings back up the table content so that it is not impacted by the existence of the pseudo-element. It essentially forces the header to be on the next page.

Answer 2

face the same problem.

You may put the content of <td> into <div> tag.