Printing Table Header & Footer with CSS
Published on September 29, 2004 in DesignMost of our Websydian pages are tables of data that extend over many pages when printed. One of the most important things to the user is always that the necessary headers and footers show up in the correct place. While it has always been easy to do this with Mozilla based browsers I recently ran across a way to do this in IE 6.
As long as the THEADs and TFOOTs are in their proper place Mozilla will print the table header and footer on each page. With IE, it is not that simple, IE requires the CSS properties display:table-header-group and display:table-footer-group to be used explicitly. Below is the sample CSS to define in your print stylesheet:
/*Needed for IE6. Must be stated explicitly to force the thead and tfoot to print on every page*/
thead { display: table-header-group;}
tfoot {display: table-footer-group;}
I have tried the above style commands in a inline style sheet
with the media specified as “media=”"print”" and cannot get this to work properly. Does this need to be in an external style sheet or am I possibly doing something else wrong? I also have a media=screen style specified for display.
It won’t work without javascript, I’ve found way how to repeat table header on each page and it works for me (http://www.codeproject.com/KB/grid/HeaderOnEachPage.aspx) but I don’t know how to change it to work also for tfoot.
Works like a charm. Thanks for the tip. My clients are going to be very happy. I’m using it in an external (linked) css file without specifying media property. I use the same css for screen and print in this case.
I’m amazed, I have to admit. Rarely do I come across a blog that’s both equally educative and engaging, аnd let me tell you, you’ve hit the nail on the head. The issue is something too few people are speaking intelligently about. I am very happy I found this in my search for something concerning this.
It’s in fact very complex in this active life to listen news on Television, so I only use world wide web for that reason, and obtain the most up-to-date information.
Wonderful work! This is the type of info that are supposed to be shared across the net. Shame on Google for no longer positioning this put up higher! Come on over and talk over with my website . Thanks =)