Here is a neat HTML trick for printing HTML tables that most people don’t know about. Btw, designing your page to print well, is actually a joyless task full of insurmountable obstacles such as lack of any page break support in modern browsers. For example, how do you explain to your pointy haired manager that page break support is still pretty much badly broken in most modern browsers? It is usually is met with disbelief and questioning of your skills as a web monkey.
“Microsoft releasing a half assed product? I find that hard to believe, sir!”
Yeah, every time I hear that sentence uttered in a serious, self righteous tone without even a hint of irony I must fight to keep my face straight.
Anyways, if you do need to print HTML tables here is a little hint. You know how a table will usually have headings on the first page, and then no heading on subsequent ones, forcing you to flip back and forward to see which column is what? Well, you can actually make most browsers to repeat your headings on each printed page using the method below.
First, you have to explicitly define the table head and table body:
| First Heading | Second Heading | Third Heading |
|---|---|---|
| foo | bar | baz |
| fim | fam | fom |
Yeah, I know that most browsers can do this automatically, but if you want printing to work, you need to have an explicit declaration. Next, you just need a single line of CSS to get things going:
@media print {
thead {display: table-header-group;}
}
That’s it. This will force most browsers to repeat the contents of thead node on every printed page. Having discovered this myself somewhat recently, I keep being amazed how many online applications don’t actually do this. Even commercial web suites whose only purpose is to generate long HTML reports often fail to implement this properly. As a consolation they offer you features that will export the reports to PDF or Excel formats, but they never even try to make the HTML version more accessible.
Nice and simple. Thanks for sharing.
For representing the html as a pdf file try to use PDF Duo .NET converting component in your ASP.NET projects. It is light component will neatly convert html to pdf.
Wow.. thanks for the sharing!
Very useful article. Thank you.
dude! very helpful, thank you!
hi
this is nice article.
do we have to insert that line in our css file. also we were trying to print a page in java script where a list adresses loads from database but a heading has to show on every print page. but not able to do that.
Thanks for the article.
This is what I was looking for. It works for IE, but not for Chrome.
Another question beings – can we do something before the page break?
I want to draw the table outline, before the page break occurs. This is required when the table cell does not draw bottom line.
Cool! Thankx
I have been looking for this clean & lovely trick for a very long time.
This is very clever trick I must say, thanks for sharing.
Wow. This helped me greatly improve the “Printer Friendly View” in a web application my company uses. So simple, so useful (I wish I could say that for more printing-related things in browsers!).
Like you say, it’s amazing more web apps don’t use this.
This does not work for Safari or Chrome. Any ideas on how to accomplish this for those browsers?
nice post. it’s work. thankyou
You are a genious!! I’ve been looking for a way to do this for a long time!!! You are a life saver!! (It doesn’t work on Chrome, but it does in IE. not sure about the other browsers)
thanks…. simple+easy+cool+nice+VERY NICEEE.. thank you so much
@ sun:
tell me when you found this trick.. i need it too :)
Wow.. this is really cool. thanks for sharing it.
how can I make it compatible for google chrome???
thead {display: table-header-group;}
this works in IE and FF, but not in Safari…. :-(
oh my my it is soooooooooo cool and simple.
thank u sooooooo much
Just I was looking for! Thanks
i would like to say thanks you very much for your sharing, it’s very useful for me :)
Thank you!!! This was just what I was looking for!!
may i know where to put this “@media print { thead {display: table-header-group;}
}” in? in the css file, or php file?
i already declare the parts. but i have no idea where to add “@media print { thead {display: table-header-group;}
}” …..
Thanks^^
I got it!!!!
Thankssssssss^^
mmmm no funciona en chrome :(
Thanks for such a useful tip!
Thanks Soooooooooooo Much for the tip.
What if you wanted the second and subsequent pages of the table to begin with “Table X.Y (cont.)”?
thanks a lot! it’s what i needed to make a report for my work :)
Unfortunatly not working in Chrome, and for quite some time this is reported as flaw in Chrome http://code.google.com/p/chromium/issues/detail?id=24826
The header has a height limit, if it is more than 1/3 of your page height, it will only show in one page only and not at all pages.
Thanks a lot. This helped me today to make some sense of my printouts of a Qt table (using html to generate the printout) with 14 columns and hundreds of rows on 11″ x 17″ paper.
not working in chrome ,O ,S only work FF.
Sorry to shoot this down…..but you will have css issues when u do this if your table has borders……a heading typically spans accross columns……as soon as the second page is printed…..there will be not horizontal lines.
It’s almost impossible to really know how a html page will be printed accurately as each browser renders the page differently…..a way needs to be found to generate pdf reports without the need for a browser then u can deliver reports in a pdf format consistent for every user.
Unfortunately this normally requires learning a new reporting language…..like ireport….& then hoping somebody has made an integration with the particular web language you are using. Most dev’s just say “live with whatever it gives you”………it just takes too much time. Printing is every dev’s nightmare.
Kind Regards
surtep
Thanks!!