Print a header for every page in Google Chrome

Question

I'm creating a TV schedule and it shouldn't have any print problems for at least one standard browser. I need to put logo and title plus table headers on every page, after days of trying and searching I found out that Chrome wouldn't print table headers and `position: fixed` elements on every page because of this known bug. Because of the capabilities such as printing background colors with `-webkit-print-color-adjust: exact` which I've heavily used and changing page borders with CSS `@page` property, I've customized my view to use Google Chrome, but now that I see it cannot print headers I'm looking for an alternatives which are: - To forget Chrome and start creating print view for another browser which needs to do tweaks to print background colors and change page margins (I'm afraid it's not possible). - To find a CSS/JS solution to make Google chrome to print table headers on every page. TL; DR: Do you know any jQuery/JavaScript/etc. code to print table headers on every page in Chr…

Accepted Answer

Yep, that's a Webkit/Chrome thing. It won't print the thead on each page. FF for instance does. What you could do to achieve something like this is use page-break.

Page break does only work on block elements, so you should style your tr's accordingly.

Like this:

```
tr{
    display:block;
}
```

Now, you should start copying your thead and put it in at every Xth row with javascript:

```
var head = $('table thead tr');
$( "tbody tr:nth-child(10n+10)" ).after(head.clone());
```

On screen, you don't want all those heads. Remove them with a media query this (for convenience I added a .head class on my th > tr row.:

```
@media screen {
    tbody .head{
        display: none;
    }
}
```

Now before each .head make the page break:

```
tbody tr.head {
    page-break-before: always;
    page-break-inside: avoid;
}
```

Check it out overhere: http://jsfiddle.net/jaap/7ZGVv/2/ Keep in mind, jsfiddle doesn't allow you to open just the preview frame, so printing does not work overhere, combine everything in your own file and you'll see the tables will split up, styling is not perfect, and it's not as flexible as your browser itself deciding where to split, but hey, it's something.

Print a header for every page in Google Chrome

Solution

Problem

Related problems