thead and tbody get mixed starting from second page

[gmartini20]

I'm creating a pdf from a html with thead and tbody tags, I have already removed all style I had and I'm still with the same problem.

Starting from second page the tbody overwrite thead, like on image bellow:

It is very strange because it works on the first page (image below) and I don't have any style on this page.

It seems to happened too with the guy who opened this issue: https://github.com/marcbachmann/node-html-pdf/issues/36. But he didn't want to have table headers on all pages, I want to.

Do you ever experienced this problem? Is there a way to solve it?

[IonicaBizau]

Is there any known solution?

[agilbert314]

Having the same issue here.

[kodamirmo]

Any luck?

[IonicaBizau]

@kodamirmo In the latest release of nodeice, I switched to the phantom-html-to-pdf package by @pofider which doesn't have this bug. :sparkles:

[morficus]

@IonicaBizau and @kodamirmo .... phantom-html-to-pdf has the same bug if you set the orientation the landscape :-(

pageSize: {
     orientation: 'landscape'
}

[marcbachmann]

That maybe works. https://github.com/marcbachmann/node-html-pdf/issues/36#issuecomment-110530819

[scurker]

Sitting the proper css rules seemed to work for me:

thead {
  display: table-header-group;
}

tr {
  page-break-inside: avoid;
}

Headers repeated correctly without overlap. One trick is that you can't have any of those rules inside of a @print media rule, as it seems that it can't calculate the repeating headers correctly when doing so.

[mdelorimier]

I seem to be unable to get this to work on my end. A working example of this would be greatly appreciated :)

[sonu27]

I've been unable to get it to repeat headers, using v2.1 of this lib. Any update?

This might be related: https://github.com/ariya/phantomjs/issues/13324 https://github.com/ariya/phantomjs/issues/13524

[haschu]

Same here. Did you find a workaround in the meantime @sonu27?

[rohitrelay]

Hi,

table thead section is not repeating after page break. I am using simple html.

header
data

Is anyone found solution?

Regards, Rohit