Table Borders are Uneven on Page Break

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 5.2.1
• Platform / OS version: Windows 10 (local), Debian (Docker)
• Node.js version: 10.13.0 (local), 10.15.3 (Docker)

   await page.pdf({
        path: destPDF,
        format: 'Letter',
        displayHeaderFooter: true,
        headerTemplate: '<div class="header" style="display: none;></div>',
        footerTemplate:
          '<div class="footer" style="width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 10px; margin: 0 30px 10px 30px;">' +
          '<div style="float: left">' +
          '<span class="date"></span>' +
          '</div>' +
          '<div style="float: right">' +
          '<span>Page </span>' +
          '<span class="pageNumber"></span> of <span class="totalPages"></span>' +
          '</div>' +
          '</div>',
        margin: {
          bottom: 70,
          left: 35,
          right: 35,
          top: 45
        },
        printBackground: true
      });

I’ve also tried all manner of preventing a split within the table rows, but the rowspan for the first three columns seems to further complicate these hacky workarounds.

• Using break-inside: avoid on the table rows and cells themselves (doesn’t work on webkit browsers for tables?)
• Adding divs within the <td> elements that have break-inside: avoid (doesn’t seem to work for my rowspan elements)
• Using position: relative on everything (doesn’t seem to change anything)
• Using display: block (totally ruins the formatting of the text within the table but also doesn’t work)
• Using <thead> and <tbody> elements inside the table (at least brings the header to the next page and sort of cleans up the uneven row borders, but doesn’t bring the “full row”, only the last two columns)

What steps will reproduce the problem?

1. Create a table such that one or two of the cells in a row span multiple rows (see screenshots below).
2. Convert the HTML table to a PDF where the table will split at the page break.
3. Notice that sometimes the table border lines are uneven at the top of the new page. I have fixed this in other cases by fussing with the margin, but that seems to only be a band-aid for certain tables and situations.

What is the expected result? Table page-splits are as clean as can be expected in a PDF; border lines are even. Row styling appears mostly intact. Ideally it would look more like the HTML version pictured here.

What happens instead? The table border lines are shifted at the top of the new page. It seems like the styling for the row that gets split is thrown out the window, the icon and text are no longer vertically centered within the row. This shift is apparent on Chrome, Firefox, and Edge when viewing the PDF.

[RazReaver]

Anyone have fixed or found why this happen on PDF? Instead, Im getting an extra line on the table.

[Masud99Rana]

solved an extra line on the table

table {
      border-collapse: separate !important;
 }