使用css打印之前缩放html表 [英] scale html table before printing using css

问题描述

我有一个表作为HTML文档的整个内容（出于合法的表目的......它是表数据，而不是布局）。某些单元格具有指定的宽度和高度（不是通过css，而是使用表结构中的旧大小内联），但整个表格没有指定宽度或高度。这是一个相当大的桌子，但如果有适当的缩放比例（约70％），它可以打印出来，以便很好地贴合在一张纸上。这可以通过使用IE，Firefox和Chrome的打印机设置中的缩放页面功能来完成。有没有办法扩展整个页面（在我的情况下只是这个表）作为打印样式表的一部分（我知道@media print {}但是那里的语句被忽略了......问题在于正确的命令用于缩放，而不是设置print css）？我可以用这个缩放屏幕视图：

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 page" function 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:

body {
   transform: scale(.7);
}

然而，在打印时，Chrome（和其他人）会忽略我的比例并自动缩放表格适合纸张的宽度，这导致我的表格被分割到第二页。我也试过应用这个并没有成功：

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:

table {page-break-inside: avoid;}

推荐答案

我最后用百分比大小重写整个表作为类，然后能够缩放页面进行打印。不知道为什么浏览器忽略了我关于转换的打印样式，但是将表从固定大小转换为比例大小使我能够使用CSS扩展它，问题就消失了。

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打印之前缩放html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！