Printing huge table with window.print() only prints one page

Question

I have a web page with a very wide report table--dozens of columns, quite a bit of horizontal scrolling. When I try to print the page with window.print(), the browser (Firefox or Chrome) just prints one page and cuts the rest off.

Is there a way I can tell the browser to print the WHOLE web page, even if it means overflowing the table into more (paper) pages?

The table currently isn't styled for display or printing in any way.

Answer 1

Print a very wide HTML table without clipping right hand side and Print Stylesheets for pages with long horizontal tables seem to indicate you are kinda screwed if you must take a CSS only approach. The only thing I can think of might work (and yes, I tried) is something a little insane like

<style media="print">
table, table * {
 display:inline-block;
}
table tr {display:block;}
table td {padding:10px;}
</style>

which, of course, attempts to do away with the normal table styles.

See http://jsfiddle.net/jfcox/WTRxm/ and, apparently for a printable version http://jsfiddle.net/jfcox/WTRxm/show/

Seems to work in Firefox and Chrome (that is, it flows the cells around as inline blocks for each row) I don't know what the standards say about this, though. Mileage may vary.

Edit: as a bonus, it seems it's not too hard to add counters to the cells so that you know what column a cell was in (only tested in chrome).

<style media="print">
table, table * {
 display:inline-block;
}
table tr {display:block;
    counter-reset: section; }
table td {padding:10px;}
table td:before {
    counter-increment: section;
    content: counters(section, ".") " ";
}    

</style>