使用 css 打印前缩放 html table

Question

我有一个 table 作为 HTML 文档的全部内容（出于合法 table 目的...它是 table 数据，而不是用于布局） .一些单元格指定了宽度和高度（不是通过 css 而是在 table 结构中使用旧的内联大小调整），但整体 table 没有指定宽度或高度。这是一个相当大的 table，但通过适当的缩放（大约 70%），它可以打印到一张 sheet 的纸上。这可以通过在 IE、Firefox 和 Chrome 的打印机设置中使用 scale page 功能来完成。有没有一种方法可以缩放整个页面（在我的例子中就是这个table）作为打印样式sheet的一部分（我知道@media print {}但是那里的陈述被忽略了...问题在于正确的缩放命令，而不是设置打印 css)？我可以用这个缩放屏幕视图：

body {
   transform: scale(.7);
}

但是在打印时，Chrome（和其他人）无视我的比例并自动缩放 table 以适合纸张的宽度，这导致我的 table 被分割成第二页。我也尝试过应用它但没有成功：

table {page-break-inside: avoid;}

Answer 1

你应该使用媒体类型

@media print {
    body {transform: scale(.7);}
    table {page-break-inside: avoid;}
}

因此，此样式将仅在打印预览模式下应用。 http://www.w3.org/TR/CSS21/media.html

Answer 2

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

Answer 3

我知道我在起死回生，但供以后搜索结果参考：

我运行遇到超宽表格的问题，导致所有浏览器错误地计算高度并在单个页面上多次重复 thead - 我的解决方案是将 zoom: 80% 应用到 body ( % 根据您的需要而变化），这迫使我们的页面有效地适合打印，然后在每一页的顶部正确地重复了广告。也许尝试缩放会在 t运行sform 不起作用的地方起作用。

例子CSS

@media print {
  body {
    zoom: 80%;
  }
}

Answer 4

使用 scale 对我不起作用。

我的解决方案是将页面大小设置为 A3，即使我希望在 A4 中进行默认打印以让浏览器在尝试在 A3 中打印时缩放我的页面。 A3 的缩放页面适合 A4。

@media print {
  @page {
    size: A3;
  }
}

使用 css 打印前缩放 html table

scale html table before printing using css

css

html-table

printing-web-page