Repeat table headers in print mode

Viewed 181596

Is it possible in CSS using a property inside an @page to say that table headers (th) should be repeated on every page if the table spreads over multiple pages?

6 Answers

This is what the THEAD element is for. Official docs here.

Some browsers repeat the thead element on each page, as they are supposed to. Others need some help: Add this to your CSS:

thead {display: table-header-group;}
tfoot {display: table-footer-group;}

Opera 7.5 and IE 5 won't repeat headers no matter what you try.

(source)

UPDATE: It looks like this may have been fixed in 2016! https://bugs.chromium.org/p/chromium/issues/detail?id=24826#c45

Original Answer (2012): Before you implement this solution it's important to know that Webkit currently doesn't do this.

Here is the relevant issue on the Chrome issue tracker: http://code.google.com/p/chromium/issues/detail?id=24826

And on the Webkit issue tracker: https://bugs.webkit.org/show_bug.cgi?id=17205

Star it on the Chrome issue tracker if you want to show that it is important to you (I did).

Related