Print Stylesheets for pages with long horizontal tables

Question

I have a page that spits out db data in long horizontal tables.

I need to print it nicely so it does not cut off. Any tips ?

Answer 1

If it doesn't fit on the paper in a readable font, it just doesn't.. In my opinion, huge horizontal tables (be it a HTML table or an Excel sheet with many columns) don't lend well to printing. For that matter, they don't lend well to viewing on a screen either. Remember vertical scrolling is much easier for your users than horizontal scrolling - all thanks to that little wheel on your mouse.

Worst case, you might need to write a seperate print version which uses a vertical layout.

Answer 2

1. Change table into horizontal one with many rows (swap rows/columns)

2. Suggest users to switch to Landscape mode. AFAIK there's no way to do that programmatically in current browsers (CSS3 defines @page {size:landscape})

3. Split table every few columns (i.e. instead one with 100 columns, generate 10 tables with 10 columns each). Use CSS table {display: inline-table} to show them all side-by-side on screen. This trick works only if you don't have cells with varying heights.

Answer 3

To ensure your table won't disappear into the Printer Abyss, ensure that its container has a width set to 100%.

I assume you know how to use print specific CSS (<style type="text/css" media="print">).
Since printers and computer monitors can have very different resolutions, do most of your size-setting in em's in the print CSS, and hide non-essential elements when printing (display:none).

Also, to increase readability on paper, use a white background, black text, and serif fonts (Times New Roman, etc.), which have a reputation for being more legible on paper.

Different browsers do printing their own way (even more than on screen), so play around a bit and see if you can get better results from another browser. That is, of course, if printing is not required to work perfectly across the entire browser spectrum.