用window.print（）打印巨大的表只打印一页 [英] Printing huge table with window.print() only prints one page

问题描述

我有一个网页，里面有很宽的报表 - 几十列，很多水平滚动。当我尝试使用window.print（）打印页面时，浏览器（Firefox或Chrome）只打印一页并将其余部分截断。

有没有办法让浏览器打印整个网页，即使它意味着将表格溢出到更多（纸张）页面中？

该表目前不以任何方式显示或打印。 解决方案

打印非常宽的HTML表格而不用右手剪报边
和
打印样式表对于具有长水平表格的页面
似乎表明，如果您必须采用仅CSS方法，那么您有点儿被搞砸了。我能想到的唯一一件可能可以正常工作（而且是的，我尝试过）是有点疯狂的像

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

当然，它试图消除正常的表格样式。

请参阅 http://jsfiddle.net/jfcox / WTRxm / ，显然对于可打印版本 http://jsfiddle.net/jfcox / WTRxm / show /

似乎可以在Firefox和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> 
  

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.

解决方案

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>

这篇关于用window.print（）打印巨大的表只打印一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！