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

Question

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;
}

Answer 1

The table was wrapped in a <div class="table-responsive">. This was causing the issue.

I added the following CSS to change how overflow-x was handled on the table-responsive div

.table-responsive { overflow-x: visible !important; }

This fixed my issue.

Keith

Answer 2

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;
}

Answer 3

Just to add to this, sometimes it's a matter of overflowing.

.table-responsive { overflow-x: visible !important; }

Solved it once, but sometimes the problem is for example the body, etc

.table-responsive, .table, body { overflow-x: visible !important; }

In my case it was the body that had a weird overflow.

Have funsies