适合A4尺寸的html桌子

Question

我有一个宽表的html文件.我想能够把它放在A4大小.超过A4尺寸的列应在新表格中列出.

我尝试使用@page属性,但它没有改变任何东西,

<style type="text/css">
    @page {    size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; }
</style>

是否有任何第三方js库自动执行此操作？(表格大小未知,用户上传数据并生成表格,因此列数不固定).{我的最终目标是将其打印为pdf,但我无法使用QT中给出的qprinter实现此目的}

我在这里放了一个带长表的html文件 - 链接.

提前致谢

Answer 1

表格无法在新行中分列，您所能做的就是根据纸张宽度制作表格宽度。

以 px 为单位的 A4 页面宽度为 2480 像素 x 3508 像素。

所以你要把表格的最大宽度设为 2480 像素，这样它就不会超过纸张的大小。

让我们猜一下您的 table id="table"，那么您的风格应该是。

<style>
  #table{
    max-width: 2480px;
    width:100%;
  }
  #table td{
    width: auto;
    overflow: hidden;
    word-wrap: break-word;
  }
</style>

Answer 2

这似乎可以实现您想要的功能，如果是将打印的页面并排放置并阅读屏幕上的整个表格。它与您在链接中提供的 html 一起使用，将其添加到您的样式表中（我只在 Chrome 中进行了测试）

  @media print{  
   @page {size:landscape;}
   html{
    -ms-transform: rotate(90deg);/* IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
   }

   table,h1,h2 {position:relative;left:4.5cm}
  }

关键是旋转打印内容，使其“向下”溢出到下一页，然后将尺寸设置为横向以旋转纸张，这样您最终会得到从左到右纵向的页面。不幸的是我无法让页面在列之间断开。但是，如果您将所有打印的页面并排贴在墙上，那么它将是可读的。打印预览将显示所有旋转 90 度的页面，这就是您想要的，然后在打印对话框中选择 A4 作为纸张尺寸。我必须重新定位表格和标题，因为它挂在第一页的左侧，也许是因为所有带有内联样式的嵌套 div？，我不知道，就像我说的这适用于你的 html。

这是打印的 pdf 文件（在本例中我将第一行重复了几次）https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0