Menu
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?
880
This can be done setting a CSS property for the thead element of the html table. The property that needs to be set is: display: table-header-group. The following html table will repeat the table header at the top of each pdf page when converted to pdf.
Footers And Headers: Headers and footers can be added to the document by the --header-* and --footer* arguments respectively. In header and footer text string supplied to e.g. --header-left, the following variables will be substituted.
ⓘ thead – table heading group. The thead element represents the block of rows that consist of the column labels (headings) for its parent table element.
I solved it with these three css rules:
thead { display: table-header-group; } tfoot { display: table-row-group; } tr { page-break-inside: avoid; } you solve this issue by adding the following css.
tr { page-break-inside: avoid; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
