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 ?

Boothe

check the answer for this question. The solution worked for me. It's breaking the table to the page size and append it at the end. so you can print all of the content. – Rambunctious

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.

Build

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.

Drainage

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.

Attain