'Table headers overlapping content on second page when converting to PDF with wkhtmltopdf

I have a table that is spanning across multiple pages. The thead is being repeated on the second page and is overlapping the content.

I am using bootstrap and have ensured the css from other wkhtmltopdf overlap solutions are implemented in my page.

thead { display: table-header-group; }
tfoot { display: table-row-group; }
tr { page-break-inside: avoid; }

table, tr, td, th, tbody, thead, tfoot, td div {
    page-break-inside: avoid !important;
}


Solution 1:[1]

this worked for me. in this table:

<table class="webgrid-table">
 <thead>
  <tr>
   //your code
  </tr>
 </thead>
</table>

only add these css class:

.webgrid-table thead {
    display: table-header-group;
}

.webgrid-table tfoot {
    display: table-row-group;
}

.webgrid-table tr {
    page-break-inside: avoid;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vajihe