scale html table before printing using css

Question

I have a table as the entire content of an HTML document (for legitimate table purposes...it is table data, not for layout). Some cells have widths and heights specified (not through css but using the old sizing inline in a table structure), but the overall table does not have a width or height specified. This is a fairly large table, but with proper scaling (about 70%) it can be printed to fit nicely on a single sheet of paper. This can be accomplished by using the scale page function within the printer settings of IE, Firefox, and Chrome. Is there a way to scale the whole page (which in my case is just this table) as part of a print stylesheet (I know about @media print {} but the statements there are being ignored...the issue is with proper commands for scaling, not with setting up the print css)? I can scale the on-screen view with this:

body {
   transform: scale(.7);
}

however when printing, Chrome (and others) disregard my scale and automatically scale the table to fit the width of the paper and that results in my table being split onto a second page. I have tried applying this as well with no success:

table {page-break-inside: avoid;}

Adiel

Never tried something like scaling tables in print but it sounds like you might need a print media query to override some browser default print style for tables. @media print { body { transform: scale(.7); } } – Cantabrigian

Answer 1

I ended up rewriting the whole table with percentage sizes applied as classes and then was able to scale the page for printing. Not sure why the browser was ignoring my print styles regarding the transform but converting the table from fixed sizes to proportional sizes has enabled me to scale it with CSS and the issue is gone.

Adiel

Answer 2

I know I'm raising the dead, but for future search results reference:

I ran into a problem with super wide tables causing all the browsers to calculate the height incorrectly and repeat the thead multiple times on single pages - my solution was to apply zoom: 80% to the body (% varies based on your needs) which forced our page to effectively fit for print and the thead then was repeated properly at the top of every page. Perhaps trying zoom will work where transform did not.

Example CSS

@media print {
  body {
    zoom: 80%;
  }
}

Litterbug

This worked for me! Thanks. I ended up with this and worked perfectly for what I need. @media print { body { zoom:50%; } table { page-break-inside: auto; } } – Toleration

Answer 3

You should use the media types

@media print {
    body {transform: scale(.7);}
    table {page-break-inside: avoid;}
}

So, this styles will by applying only in print preview mode. http://www.w3.org/TR/CSS21/media.html

Obeisance

the issue is that the browsers ignore these statements when printing. I have tried applying them specifically in the print style but they are ignored. – Adiel

Answer 4

Using scale does not work for me.

My solution was to set page size to A3 even if I wanted a default print to happen in A4, to let the browser scale my page as it attempted to print in A3. The scaled page of A3 fits nicely on A4.

@media print {
  @page {
    size: A3;
  }
}

Idiomorphic

Thanks man, exactly what I was looking for!! It cleaned up my print page nicely! – Saccharometer

This should be defined as the correct answer :) – Elga