9

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 ?

Boris Smirnov
  • 1,217
  • 4
  • 15
  • 27
  • check the answer for this [question](https://stackoverflow.com/questions/8891944/print-a-very-wide-html-table-without-clipping-right-hand-side?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa). 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. – Afflatus May 04 '18 at 12:33

3 Answers3

7

  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.

Kornel
  • 97,764
  • 37
  • 219
  • 309
6

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.

Alexander Malfait
  • 2,691
  • 1
  • 23
  • 23
5

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.

Lokerim
  • 338
  • 1
  • 5
  • 21
Morten Bergfall
  • 2,296
  • 4
  • 20
  • 35