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.