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文件 - link。

提前致谢

Answer 1

表格无法在新行中打破其列，您只能根据纸张宽度制作表格宽度。

px中的A4页面宽度为2480像素x 3508像素。

所以你将表的最大宽度设置为2480px，这样它就不会超过纸张的大小。

让我们猜猜你的表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}
  }

关键是旋转内容进行打印，使其溢出＆＃34; down＆＃34;到下一页，然后将大小设置为横向以旋转纸张，这样您最终会从左到右纵向页面。不幸的是我无法让页面在列之间中断。但是，如果您将所有打印的页面并排放在墙上，它将是可读的。打印预览将显示所有翻转90度的页面，这是您想要的，然后在打印对话框中选择A4作为纸张尺寸。我不得不重新定位表和你的标题，因为它挂在第一页的左侧，也许是因为所有嵌套的div都有内联样式？，我不知道，就像我说这与你的html一起工作。

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

Answer 3

如果你想获得好的可打印纸张，你应该尝试使用div而不是表格。使用<div>，我们可以更好地控制其显示方式。与<div>，<table>，<tr>等不同，可以轻松设置<td>样式。

我做了以下事情：

CSS

@media print {
    @page {
      margin: 0;
    }
    body {
        height: 100%;
        width: 100%;
    }
    div.divTableRow > div {
      display: inline-block;  
      border: solid 1px #ccc;
      margin: 0.1cm;
      font-size: 1rem;
    }
    div.divTableRow {
      display: block;
      margin: solid 2px black;
      margin: 0.2cm 1cm;
      font-size: 0;
      white-space: nowrap;
    }
    .divTable {
        transform: translate(8.5in, -100%) rotate(90deg);
        transform-origin: bottom left;
        display: block;
    }
}


.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
  width:100px; // set to a fixed value so as to get the table in the ordered manner.
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}

.divTableBody {
  display: table-row-group;
}

您可以根据需要自定义相同的内容。

小提琴：div-table-printable

您可以使用table-to-divs

将html与<table>转换为<div>

其他参考资料：

printing-html-table

CSS2PDF

适合A4尺寸的html桌子

3 个答案: