April 29, 2013

Printing Wide HTML Tables

I built a report using HTML table that had more than two dozen columns. In fact, it was a matrix report where the number of rows and columns could grow indefinitely. The report looked perfect on the screen. However, upon printing, the browsers would print only the left portion of the table while the portion which does not fit on the page horizontally is discarded.

I was not able to find a solution so I made a half-hearted attempt at this. My "solution":

  • Create a fixed width div with hidden overflow
  • Place a copy of the table inside this div
  • Scroll the desired portion of the table into view using CSS positioning
  • Repeat as many times necessary

Below is a jQuery-powered demonstration of this idea. The output (PDF, XPS) is not perfect; but I am sure it can be improved.

In case you are wondering, the "accepted" solution was to export the table data as a Microsoft Excel/OpenOffice Calc document which provides more precise control over printing.