Repeating HTML Table Headers on Each Printed Page

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:

<table>
   <thead>
      <tr>
         <th>First Heading</th>
         <th>Second Heading</th>
         <th>Third Heading</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>foo</td>
         <td>bar</td>
         <td>baz</td>
      </tr>
 
      . . .
 
      <tr>
         <td>fim</td>
         <td>fam</td>
         <td>fom</td>
      </tr>
   </tbody>
</table>

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.

This entry was posted in programming and tagged . Bookmark the permalink.



32 Responses to Repeating HTML Table Headers on Each Printed Page

  1. MockY UNITED STATES Mozilla Firefox Ubuntu Linux says:

    Nice and simple. Thanks for sharing.

    Reply  |  Quote
  2. 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.

    Reply  |  Quote
  3. Dharma SINGAPORE Safari Mac OS says:

    Wow.. thanks for the sharing!

    Reply  |  Quote
  4. Madhu T INDIA Google Chrome Windows says:

    Very useful article. Thank you.

    Reply  |  Quote
  5. Noah UNITED STATES Google Chrome Windows says:

    dude! very helpful, thank you!

    Reply  |  Quote
  6. anish INDIA Mozilla Firefox Windows says:

    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.

    Reply  |  Quote
  7. sun SINGAPORE Google Chrome Windows says:

    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.

    Reply  |  Quote
  8. Anupam INDIA Mozilla Firefox Windows says:

    Cool! Thankx
    I have been looking for this clean & lovely trick for a very long time.

    Reply  |  Quote
  9. too POLAND Opera Windows says:

    This is very clever trick I must say, thanks for sharing.

    Reply  |  Quote
  10. Eric UNITED STATES Mozilla Firefox Windows says:

    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.

    Reply  |  Quote
  11. Larry UNITED STATES Internet Explorer Windows says:

    This does not work for Safari or Chrome. Any ideas on how to accomplish this for those browsers?

    Reply  |  Quote
  12. Purwito INDONESIA Mozilla Firefox Ubuntu Linux says:

    nice post. it’s work. thankyou

    Reply  |  Quote
  13. Kevin UNITED STATES Google Chrome Windows says:

    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)

    Reply  |  Quote
  14. Christina INDONESIA Mozilla Firefox Windows says:

    thanks…. simple+easy+cool+nice+VERY NICEEE.. thank you so much

    Reply  |  Quote
  15. Christina INDONESIA Mozilla Firefox Windows says:

    @ sun:
    tell me when you found this trick.. i need it too :)

    Reply  |  Quote
  16. Babu UNITED STATES Mozilla Firefox Windows says:

    Wow.. this is really cool. thanks for sharing it.

    Reply  |  Quote
  17. meri ALBANIA Google Chrome Windows says:

    how can I make it compatible for google chrome???

    Reply  |  Quote
  18. kali UNITED STATES Safari Windows says:

    thead {display: table-header-group;}

    this works in IE and FF, but not in Safari…. :-(

    Reply  |  Quote
  19. mahesh Google Chrome Windows says:

    oh my my it is soooooooooo cool and simple.
    thank u sooooooo much

    Reply  |  Quote
  20. Daniel R. H. VENEZUELA Internet Explorer Windows says:

    Just I was looking for! Thanks

    Reply  |  Quote
  21. nexsys7 AUSTRALIA Mozilla Firefox Windows says:

    i would like to say thanks you very much for your sharing, it’s very useful for me :)

    Reply  |  Quote
  22. Christie UNITED STATES Internet Explorer Windows says:

    Thank you!!! This was just what I was looking for!!

    Reply  |  Quote
  23. cindy MALAYSIA Internet Explorer Windows says:

    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^^

    Reply  |  Quote
  24. cindy MALAYSIA Internet Explorer Windows says:

    I got it!!!!
    Thankssssssss^^

    Reply  |  Quote
  25. Dario CANADA Google Chrome Linux says:

    mmmm no funciona en chrome :(

    Reply  |  Quote
  26. Carlos PORTUGAL Google Chrome Windows says:

    Thanks for such a useful tip!

    Reply  |  Quote
  27. ABA Google Chrome Windows says:

    Thanks Soooooooooooo Much for the tip.

    Reply  |  Quote
  28. JM UNITED STATES Google Chrome Windows says:

    What if you wanted the second and subsequent pages of the table to begin with “Table X.Y (cont.)”?

    Reply  |  Quote
  29. nick ROMANIA Google Chrome Linux says:

    thanks a lot! it’s what i needed to make a report for my work :)

    Reply  |  Quote
  30. Der Franz NETHERLANDS Mozilla Firefox Windows says:

    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

    Reply  |  Quote
  31. Marcus Internet Explorer Windows says:

    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.

    Reply  |  Quote
  32. John Drescher UNITED STATES Mozilla Firefox Windows says:

    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.

    Reply  |  Quote

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>