wkhtmltopdf repeating thead headers overlapping content

问题

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?

回答1:

I solved it with these three css rules:

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

回答2:

you solve this issue by adding the following css.

   tr {
         page-break-inside: avoid;
      }

回答3:

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

来源：https://stackoverflow.com/questions/24648383/wkhtmltopdf-repeating-thead-headers-overlapping-content

标签

wkhtmltopdf