在使用 css 打印之前缩放 html 表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28757370/
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
scale html table before printing using css
提问by techtheatre
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 pagefunction 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:
我有一个表格作为 HTML 文档的全部内容（出于合法的表格目的......它是表格数据，而不是用于布局）。某些单元格指定了宽度和高度（不是通过 css，而是在表格结构中使用旧的内联大小调整），但整个表格没有指定宽度或高度。这是一个相当大的桌子，但如果缩放比例适当（大约 70%），它可以打印在一张纸上。这可以通过使用scale pageIE、Firefox 和 Chrome 的打印机设置中的功能来完成。有没有办法将整个页面（在我的情况下就是这个表格）作为打印样式表的一部分（我知道@media print {}但是那里的语句被忽略了......问题在于适当的缩放命令，而不是设置打印CSS）？我可以用这个缩放屏幕视图：
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:
但是在打印时，Chrome（和其他人）会忽略我的比例并自动缩放表格以适应纸张的宽度，这导致我的表格被拆分到第二页。我也尝试过应用它，但没有成功：
table {page-break-inside: avoid;}
采纳答案by techtheatre
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.
我最终重写了整个表格，并将百分比大小作为类应用，然后能够缩放页面以进行打印。不知道为什么浏览器会忽略我关于转换的打印样式，但是将表格从固定大小转换为比例大小使我能够使用 CSS 对其进行缩放，问题就消失了。
回答by Dmitry
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
因此，此样式仅适用于打印预览模式。 http://www.w3.org/TR/CSS21/media.html
回答by TerraElise
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.
我遇到了超宽表格的问题，导致所有浏览器都错误地计算高度并在单个页面上多次重复 thead - 我的解决方案是将缩放：80% 应用于正文（% 根据您的需要而变化）这迫使我们的页面有效地适合打印，然后在每个页面的顶部正确重复了广告。也许尝试缩放会在变换没有的地方工作。
