Blog

Solution for overlapping content when generating PDFs with table headers and footers

Developers often run into an issue when converting HTML to PDF that contains tables. The issue is that if the content runs onto the next page, the table headers (<thead>) and footers (<tfoot>) are repeating and overlapping on each other when they shouldn’t be. This happens on both wkhtmltopdf and Headless Chrome. In fact, it is an issue with webkit in general.

Here is an example of the issue happening.

In fact, it has been listed as an open issue on the wkhtmltopdf github for since 2014. That long discussion and possible solutions are linked here.

The most popular solution in that Github issue is to include this CSS in your markup:


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


However, if that does not fix it for you, then your only recourse is to abandon <thead> and <tfoot> and instead just make the first row in your table styled so that it looks like a table header, etc, etc.