javascript 用 window.print() 打印大表只打印一页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10505006/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Printing huge table with window.print() only prints one page
提问by abeger
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.
我有一个网页，里面有一个非常宽的报告表——几十列，相当多的水平滚动。当我尝试使用 window.print() 打印页面时，浏览器（Firefox 或 Chrome）只打印一页并切断其余页面。
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.
该表格当前没有以任何方式显示或打印的样式。
回答by JayC
Print a very wide HTML table without clipping right hand sideand Print Stylesheets for pages with long horizontal tablesseem to indicate you are kinda screwed if you must take a CSS only approach. The only thing I can think of mightwork (and yes, I tried) is something a little insanelike
打印一个非常宽的 HTML 表格而不剪裁右手边， 打印带有长水平表格的页面的样式表似乎表明如果您必须采用仅使用 CSS 的方法，您就有点搞砸了。我能想到的唯一可能有用的东西（是的，我试过）是有点疯狂的东西
<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/
参见http://jsfiddle.net/jfcox/WTRxm/，显然是可打印版本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.
似乎在 Firefox 和 Chrome 中工作（也就是说，它作为每一行的内联块在单元格周围流动）我不知道标准对此是怎么说的。里程可能会有所不同。
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).
编辑：作为奖励，似乎向单元格添加计数器并不太难，以便您知道单元格所在的列（仅在 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>
回答by Eliran Malka
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.
这是为什么？你最好编写一个指定的样式表进行打印，因为没有办法强制（欺骗）浏览器打印水平滚动的内容，无论是通过 JavaScript 还是通过 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 Apartto get you started, good luck.
这是一篇关于在 A List Apart 上编写用于打印的 CSS的文章来帮助您入门，祝您好运。
回答by anuragbh
You can create a print.css to style the content for your print page. Link it to your page as:
您可以创建一个 print.css 来为您的打印页面设置内容样式。将其链接到您的页面，如下所示：
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
