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

To ensure your table(s) won't diseappear into the Printer Abyss, ensure that it's 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 have quite 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 white background and black text; and serif fonts ( Times New Roman, etc.) 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 other browser. That is, of course, if printing is not required to work perfectly across the entire browser spectrum...

Answer 3

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.