wkhtmltopdf repeating thead headers overlapping content

Asked 9/7, 2014 at 8:5 Answered 16/1 at 7:48

We're embedding wkhtmltopdf (0.12.1) in a Java application, using stdin and stdout for input/output. We want multiple (different) headers in our PDF, so instead of using the --header-html option we're using a thead, which is repeated on several pages. Here's a little example HTML:

<!DOCTYPE html>
<html>
<body> 
    <table style="page-break-after: always;">
        <thead>
            <tr>
                <th>My first header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First content</td>
            </tr>
        </tbody>
    </table>
    <table>
        <thead>
            <tr>
                <th>My second header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Second content</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

So far so good. Problems arise when the content spans multiple pages. The header is then displayed on top of the content, overlapping it. Example html and PDF. Notice that the second header is rendered just fine, since the tr only spans one page.

Other people have had similar problems. There are some workarounds for this when you're using the --header-html option, such as adding --header-spacing or --margin-top, but these options have no effect on the repeated thead. Any ideas?

Crandall answered 9/7, 2014 at 8:5 Comment(1)

This is a known problem with wkhtmltopdf, see issue 1524. – Dayledaylight 10/7, 2014 at 5:15

I solved it with these three css rules:

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

Fertilizer answered 30/12, 2015 at 20:9 Comment(5)

We had a complex multi-line header with muliple colspans and rowspans, and this solution worked perfectly for us. – Tnt 4/2, 2016 at 13:59

thanks a lot!! I had a problem with this bug for a long time, and this solution worked perfectly in my PDF's – Arlindaarline 28/4, 2017 at 5:33

In my test, using the thead OR the tr rule worked. Seems like it just needs a nudge :-) – Hennery 2/7, 2019 at 13:44

This is an older question, but this solution worked for me. – Agio 15/7, 2019 at 20:21

Did the job for me – Toname 14/1, 2020 at 10:34

you solve this issue by adding the following css.

   tr {
         page-break-inside: avoid;
      }

Wartime answered 31/8, 2015 at 9:40 Comment(0)

I found tr { page-break-inside: avoid; } worked to a point, but not when my headers spanned multiple lines. Since I wanted to keep my thead section, my solution was to switch the repeat off.

thead, tfoot {
  display: table-row-group;
}

Portugal answered 8/1, 2016 at 0:43 Comment(2)

This did the job for me! – Ealasaid 22/2, 2017 at 6:20

This causes that the theader is not printed on the following pages (wkhtmltopdf 0.12.5-1.msvc2015-win32) – Rapscallion 11/1, 2019 at 10:1

I'm using wkhtmltopdf 0.12.6 (with patched qt), I had the same issue resolved by removing the parent container (e.g. <div>...</div>).

Duro answered 16/1 at 7:48 Comment(0)

Recommended topics

Hot tags