0

Question summary:

I have a page which displays an html table with cells approximately 100px per 100px. This table can be anywhere from 1 column/row to N columns/rows but I need to create a system which correctly prints this document across all browsers.

What I have tried so far:

My current solution utilises this answer from another SO question: https://stackoverflow.com/a/19582173/781884

Problem with current solution

This solution does work relatively well in certain situations using Chrome. The problem is a lot of our users use IE7 and it does not work well, especially when printing large tables.

Possible solutions I had:

  1. Create a button which utilises the current system but it "cuts" the page at multiple different widths to allow printing in horizontal / vertical / a3 (horizontal and vertical). This is most definitely the quickest fix but it still leaves the possibility that IE7 doesn't work properly and it prints a table which makes no sense at all (which happens under certain conditions)
  2. Create a PDF file of the page (multiple different size variations included) to allow the user to export the size they require. The problem with this is the time that I will need to invest to see how this can be done and to overcome any issues we have with very large tables. This is by far the most risky in terms of investement / benefit
  3. The third option is obviously to scrap the whole idea and change the logic of the page to not have a table but display the data in a different manner. This would preferably be avoided.
Community
  • 1
  • 1
James
  • 2,013
  • 3
  • 18
  • 31
  • You can modify the first solution to cut the table at columns breaks instead of fixed widths. The only problem I see are the column spans. – Salman A Jun 11 '14 at 10:03
  • Would it be feasible to have the server export the table to an file, such as a CSV file, which could then be printed in an external application or stored digitally? – Oracle Jun 19 '14 at 12:18

4 Answers4

1

I think the first solution is the simplest to get working. The question is, why doesn't it work on IE7? Do you have fancy formatting on you table or other stuff? Does your version of jQuery support IE7? Etc etc.

Because you know the exact size of the cells, you could just split the table on N x M cells, for whatever N and M you get the best fit on a printed page. If you have plain tables and you use an IE7 supporting jQuery version, this should work without any problems. Make sure there aren't any row/colspan bugs in your table and all the HTML is valid.

zeebonk
  • 4,864
  • 4
  • 21
  • 31
  • Although your answer doesn't actually solve my problem, I didn't want the bounty to go to waste. You made a few comments of pit-holes I may have without completely changing my system (especially as the other suggestions involve large amounts of work without any clear indication of whether or not it will work) – James Jun 20 '14 at 12:50
1

Best solution is to use some framework like bootstrap or maybe a data table as said by other people. I assure you it will fix your problem and it is def worth looking into. Using these frameworks, you can generate the table using js which is a very elegant solution.

Also bootstrap framework is responsive and hence will display wonderfully well in all latest browsers and all sizes. It will align the table based on the viewport size of the browser.

The datatable framework also does the pretty much same thing. But the only difference is that it offers some sorting and other ordering functions. Essentially it is built on top of bootstrap

cache
  • 113
  • 1
  • 11
0

A quick solution: use a responsive framework lie bootstrap:

http://getbootstrap.com/css/#tables

and then the .table-responsive

And giving it the final touch via the print media query, based and how it should look.

or a jquery only solution: https://datatables.net/

Yours JungerIslaender

jungerislaender
  • 304
  • 1
  • 12
0

Using bootstrap frame work will definitely help with cross-browser compatibility. Bootstrap also makes it really easy for you to configure exactly what elements of your page you want to show in printouts. With Chrome you can actually save directly to PDF too, which is cool.

Here is a working example on my website.

user3743250
  • 89
  • 5