Print a header for every page in Google Chrome
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 repeating Page headers in Chrome
Ok, no takers on this one, so with a few more days of looking around and choosing not to write my own solution, here is what I found.
At the very bottom of a Stack post with no votes and no comments was this lonely little link: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243
This thing is awesome, it's designed to handle wide pages of content and format them into columns like a newspaper. It handles page breaks especially well and is quite flexible.
In my case, I needed a single column (width of the page) and repeating headers and footers. I used Example 10 as my base:http://welcome.totheinter.net/autocolumn/sample10.html
I simply added the link to the plug in, changed the necessary IDs and classes to suit my page, and made some minor CSS changes to heights and widths and I was able to print multi-page content with repeating headers and footers in Google Chrome! (my company's preferred browser)
TIPS:
One little CSS trick, I made the content div MIN-HEIGHT set so it
pushed the footer down on short pages. (Don't do this if you want the user to have the option of portrait or landscape). My final print is fixed so this was great for me.I tested different heights on content to see how it breaks the content, it was smooth everytime.
I did try to post my final example in JsBin and Fiddle, but it ran an error each time.
So again, Example 10 above is a great place to start as it shows before and after.
Here is my final with variable height content and repeating Headers and Footers:
(this is the view when I click the browser Print Link/Button in Chrome )
UPDATE 7/2014: Once again Chrome is the bane of my existence with print issues. I saw the comment below about the link that I provided. He's right, it renders correctly but the print view is incorrect. Sorry about that, but it's still a good example to play with to learn the settings.
I am still using this solution, IT DOES work, but you have to adjust the CSS and the JS var for body content size. The sizing combinations are VERY Sensitive, but when you get the page height/width right and the content size right, it does work. I had to write separate functions for paper sizes legal/letter. It's limited but works for our purposes.
I also noticed that depending on my window size it did not not always look right, but the final PRINTED product was as expected with repeating headers and footers, so I used a window that went straight to print so the user didn't notice the output, but rather saw the chrome print rendering. I hate these types of workaround but with everyone in my office using Chrome, it's a necessary evil.
Having Google Chrome repeat table headers on printed pages
I believe this is a bug in Chrome.
Related Topics
Min/Max Width/Height with Multiple Values
Can the :Before and :After Pseudo-Elements Inherit Height from the Parent Element
How to Change Inline Text Height, Not Just the Line-Height
Cross-Browser 'Cursor:Pointer'
CSS Multiple Class/Id Selectors
What Is Element.Style and Why Is It Overriding My CSS Settings
Making a CSS Footer Either Sit at the Bottom of the Browser Window or Bottom of Content
Change Only One of Multiple Backgrounds on Hover
CSS Linear Gradient Transparency Misbehaving Only in Safari
How to Use CSS Text-Overflow on Text That's Wrapping
Can CSS3 Translatez() Be Used Instead of Z-Index
CSS Adding Border Radius to an Iframe