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.

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.

• javascript
• html
• css
• printing

• You might want to check stackoverflow./questions/1763639/… – JayC Commented May 8, 2012 at 19:46
• ...or is the issue that the table just doesn't fit width wise? Hrm... – JayC Commented May 8, 2012 at 19:47
• It just doesn't fit. I'm wondering if there's a way to force the table to overflow onto the next page. – abeger Commented May 9, 2012 at 22:24

3 Answers 3

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/jfcox/WTRxm/ and, apparently for a printable version http://jsfiddle/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>

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

why is that? you're much better off writing a designated stylesheet for print, as there's no way to enforce (trick) the browser into printing horizontally scrolled content, neither via JavaScript nor by CSS.

either break the tabular data in some other fashion, or use a stylesheet for that purpose.

here's an article on writing CSS for print on A List Apart to get you started, good luck.

You can create a print.css to style the content for your print page. Link it to your page as:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />