使用CSS在打印前缩放HTML表格

Question

我有一个表格作为HTML文档的全部内容（出于合法的表格目的……这是表格数据，而不是为了布局）。某些单元格通过表格结构中的旧大小调整行内指定了宽度和高度（而不是通过CSS），但整个表格没有指定宽度或高度。这是一个相当大的表格，但通过适当的缩放（约70％），可以将其打印得很好地适合一张纸。 这可以通过在IE、Firefox和Chrome的打印机设置中使用“缩放页面”函数来实现。是否有一种方法可以将整个页面（在我的情况下只是这个表格）作为打印样式表的一部分进行缩放（我知道关于@media print {}，但那里的语句被忽略了……问题在于正确的缩放命令，而不是设置打印css）？ 我可以使用以下方式缩放屏幕视图：

body {
   transform: scale(.7);
}

然而，在打印时，Chrome（以及其他浏览器）会忽略我的缩放设置，并自动调整表格大小以适应纸张的宽度，导致我的表格被分成了第二页。我尝试过以下方法，但没有成功：

table {page-break-inside: avoid;}

- techtheatre

---

以前从未尝试过在打印中缩放表格，但听起来你可能需要一个打印媒体查询来覆盖一些浏览器默认的表格打印样式。@media print { body { transform: scale(.7); } } - Fuzzy Logic

Answer 1

我知道我在唤起死者，但为了未来的搜索结果参考：

我遇到了一个问题，超宽的表格会导致所有浏览器计算高度不正确，并在单个页面上重复 thead - 我的解决方案是将 zoom: 80% 应用于 body （% 取决于您的需求），这迫使我们的页面有效地适合打印，然后 thead 就能在每个页面顶部正确重复。也许尝试缩放会在变换无效时起作用。

示例 CSS

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

- TerraElise

---

这对我有用！谢谢。最终我得到了这个，完美地满足了我的需求。@media print { body { zoom:50%; } table { page-break-inside: auto; } } - Cobysan

Answer 2

你应该使用媒体类型。

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

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

- Dmitry

---

问题在于浏览器在打印时忽略这些声明。我已经尝试在打印样式中特别应用它们，但它们被忽略了。 - techtheatre

Answer 3

使用scale对我没有效果。

我的解决方案是将页面大小设置为A3，即使我想要默认打印在A4上，让浏览器在尝试以A3打印时自动缩放我的页面。经过缩放的A3页面很好地适合在A4上打印。

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

- Him Hah

---

谢谢，正是我正在寻找的东西!!它很好地清理了我的打印页面! - Tellisense

这应该被定义为正确答案 :) - Allan Stepps

Answer 4

我最终使用百分比大小作为类应用重写了整个表格，然后就可以按比例缩放页面进行打印。不确定为什么浏览器会忽略我的关于转换的打印样式，但将表格从固定尺寸转换为比例大小使我能够使用CSS对其进行缩放，问题已经解决。

- techtheatre