适合 A4 大小的 html 表格答案

【问题标题】：Fit a html table in A4 size适合 A4 大小的 html 表格
【发布时间】：2016-07-28 06:22:44
【问题描述】：

我有一个带有宽表的 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。

提前致谢

【问题讨论】：

如果您有一个表格并使用 100% 宽度，那么我相信，它会打印与您选择的媒体相对应的 100% 宽度，前提是该表格也有一个 100% 宽度的父级。
@NathanL，表格可能很宽（可能包含 100 列），所以我不想一定“适合”表格（因为这会导致尺寸非常小）。假设我有 100 列，A4 大小规定不超过 7 列，理想情况下，我的 html 现在应该有前 7 列，然后在下面，另外 7 列，依此类推......
如果你有 7 列适合 A4 并且你有 20 列例如，所有 20 列都将在表格中，所以在新页面上开始第 8 列的问题，我觉得这是不可能的，因为除非创建具有新列的新表，否则该表已经有 20 个列。
我建议你将它们设为divs，如果它不是一个大的返工的话。因为它们“可能”按照您的意愿工作。
stackoverflow.com/questions/11250501/…

标签： html css pdf

【解决方案1】：

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

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

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

让我们猜猜你的桌子 id="table"，那么你的风格应该是。

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

【讨论】：

【解决方案2】：

如果您想获得好的可打印表格，您应该尝试使用 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 将带有<table> 的html 转换为<div>

其他参考资料：

printing-html-table

CSS2PDF

【讨论】：

你能建议 div 如何处理 rowpan 或 colspan 大于 1 的表格单元格吗？在 divtable 上，它在转换为 div 时保持列标题为空

【解决方案3】：

这似乎可以满足您的要求，如果将打印的页面并排放置并阅读屏幕上的整个表格。它与您在链接中提供的 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

【讨论】：