Table headers duplicated when rendering PDF

What happens: printing the final PDF, the table header seems to be repeated over all the table randomly (see attached pic).

When it happens: My code renders fine on the “edit” mode, fine on the “print” mode (clicking on ‘get PDF’) but the issue appears on the printing preview windows to actually print or save the PDF. If I save the PDF the issue remains.

Note: I’m using Chrome on a Mac. It seems happening if you have a two-column section, then a <div class='wide'> , followed by a table in a two-column section (see brew code below). Do you see the same problem? Is there a way to fix it?

Additional Details

Brew code to reproduce :

Click to expand

<div class='wide' style='text-align: center;'>
# Character Name
</div>

 
**Concept:** Character Concept

Some text here for the description of the character to be. Some text here for the description of the character to be
 


<div class='wide' style='text-align: center;'>
### ~~ :: ~~ :: ~~ :: ~~
### Charisma:  +2  ;  Parry:  5  ;  Pace:  6”  ;  Robustness:  5
</div>

##### Cookie Tastiness
| Tastiness | Cookie Type |
|:----:|:-------------|
| -5  | Raisin |
| 8th  | Chocolate Chip |
| 11th | 2 or lower |
| 14th | 3 or lower |
| 17th | 4 or lower |
| 8th  | Chocolate Chip |
| 11th | 2 or lower |
| 14th | 3 or lower |
| 17th | 4 or lower |

[calculuschild]

Solution:

Add this bit of CSS to the code:

.phb table thead { display: table-row-group;}

From w3 schools: “…when printing a large table that spans multiple pages, the [thead and tfoot] elements can enable the table header and footer to be printed at the top and bottom of each page.” It looks like the column-span: all is somehow causing subsequent tables to confuse chrome’s PDF printer about where the top of a new page is. display: table-row-group will force it to print just like any other table row, only once per page.

[calculuschild]

I would recommend it be added to the codebase, yeah. There might need to be some testing to make sure it didn’t mess anything else up, but I’m pretty sure it wouldn’t.

My real question though is why the column-span: all is causing the PDF printer to get confused in the first place. Might be a bug in Chrome’s PDF rendering backend (and they do have lots of bugs), or something else in the Homebrewery making it weird. I did a test on my local machine with some unstyled html, but the printing bug doesn’t show up until I apply the Homebrewery css styles to it. It didn’t seem to be anything within the thead sections that was causing the problem (deleting them changed how the headers looked but they still printed all over the table).