wkhtmltopdf repeating thead headers overlapping content

Question

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?

This is a known problem with wkhtmltopdf, see [issue 1524](https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524). — ashkulz, Jul 10 '14 at 05:15

Juan Carlos Velez · Answer 1 · 2016-07-18T13:10:44.803

62

I solved it with these three css rules:

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

edited Jul 18 '16 at 13:10

answered Dec 30 '15 at 20:09

Juan Carlos Velez

2,840
2
34
48

2

We had a complex multi-line header with muliple colspans and rowspans, and this solution worked perfectly for us. – Fayyaz Naqvi Feb 04 '16 at 13:59
1

thanks a lot!! I had a problem with this bug for a long time, and this solution worked perfectly in my PDF's – Alfchee Apr 28 '17 at 05:33
In my test, using the thead OR the tr rule worked. Seems like it just needs a nudge :-) – David Hammond Jul 02 '19 at 13:44
1

This is an older question, but this solution worked for me. – TheRobQ Jul 15 '19 at 20:21
1

Did the job for me – zdarsky.peter Jan 14 '20 at 10:34

score 15 · Answer 2 · answered Aug 31 '15 at 09:40

15

you solve this issue by adding the following css.

   tr {
         page-break-inside: avoid;
      }

answered Aug 31 '15 at 09:40

Tunde Pizzle

787
1
9
18

score 9 · Answer 3 · answered Jan 08 '16 at 00:43

9

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

answered Jan 08 '16 at 00:43

Hugh

1,431
2
16
30

1

This did the job for me! – sattu Feb 22 '17 at 06:20
3

This causes that the theader is not printed on the following pages (wkhtmltopdf 0.12.5-1.msvc2015-win32) – user2345998 Jan 11 '19 at 10:01

wkhtmltopdf repeating thead headers overlapping content

3 Answers3

Linked