使用css打印之前缩放html表

tec*_*tre 21 css html-table printing-web-page

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

body {
   transform: scale(.7);
}
Run Code Online (Sandbox Code Playgroud)

但是在打印时,Chrome(和其他人)会忽略我的比例并自动缩放表格以适应纸张的宽度,这会导致我的表格被分割到第二页.我也试过应用这个但没有成功:

table {page-break-inside: avoid;}
Run Code Online (Sandbox Code Playgroud)

Dmi*_*try 16

您应该使用媒体类型

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

因此,此样式仅适用于打印预览模式. http://www.w3.org/TR/CSS21/media.html

  • 问题是浏览器在打印时会忽略这些语句.我曾尝试在打印样式中专门应用它们,但它们被忽略了. (3认同)

Him*_*Hah 12

使用scale对我来说不起作用。

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

@media print {
  @page {
    size: A3;
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 这应该被定义为正确答案:) (3认同)
  • 谢谢伙计,正是我正在寻找的东西!它很好地清理了我的打印页面! (2认同)

tec*_*tre 9

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


Ter*_*ise 7

我知道我已经死了,但是为了将来的搜索结果参考:

我遇到了超宽表的问题导致所有浏览器错误地计算高度并在单个页面上多次重复thead - 我的解决方案是应用缩放:80%到身体(%根据您的需要而变化)强制我们的页面有效地适合打印,然后在每页的顶部正确重复.也许尝试缩放将适用于变换没有的地方.