View Full Version : HTML / CSS Printing

04-05-2009, 08:57 PM

I have created a web-application in Classic ASP, and one of the reports contains X number of columns and Y number of rows. Both x and y are unknown at design-time, and most likely, this report will span onto multiple of pages down and across.

Iím wondering if its possible, using HTML / CSS or anything else to print such a report, having the first row and column repeat on every page?

I have found the following code that repeats the first row one on every down page:

tHead {display : table-header-group;}

However, not only that column 1 doesnít repeat on every across page, but also IE cuts off the column where my first across page ends, and doesnít print the remaining columns. For example, if I have a 8-column table, and only 5.5 columns fit, column 6 prints partially, and columns7 and 8 arenít printed at all.

I also cannot instruct the user to click shrink to fit, as it will be too small, and there may be even 20 columns by 70 rows, or more, depending on the criteria.

It would also be nice to set the page orientation automatically to landscape.

I was also wondering if there is any pixel to inches ratio, and if I can set page breaks, I may be able to use that to create 1 <table> per page?

Any help will be greatly appreciated.

04-06-2009, 05:57 PM
Any ideas?

04-06-2009, 10:23 PM
Print layouts are not that hard but you’ll notice that different browsers interpret it differently – just like regular screen layouts but with less possiblities to work around.

#1: Good intentions by the W3C aren’t necessarily followed by browser vendors. While there are many useful CSS properties not all of them are supported in all browsers.

#2: You shouldn’t set fixed sizes for that matter as you never know what paper size/format the user is using. Relative sizes (percent) are OK but you should be aware that overflowing content may not be printed.

#3: You should make proper use of row groups. Specifically the <thead> element is meant to be displayed/repeated on every page for better understanding. However, point #1 applies: not all browsers do necessarily support that and there’s nothing you can do about it.

#4: For page orientation there is the size property according to http://www.w3.org/TR/CSS2/page.html#page-size-prop. However, I’ve actually never used it and don’t know from mind how good it is supported. But because I’ve never read about it before I guess it isn’t well supported.