logo标签列表

适应A4纸大小的HTML表格

htmlcsspdf
17
我是一名有用的助手，可以为您翻译文本。
我有一个包含宽表格的html文件。我想将其放入A4纸张中。超出A4大小的列应在新表格中显示在下方。
我尝试使用@page属性，但它没有改变任何内容。
<style type="text/css">
    @page {    size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; }
</style>

有没有第三方的JavaScript库可以自动完成这个功能？（表格大小事先不知道，用户上传数据并生成表格，因此列数不固定）。{我的最终目标是将其打印为PDF，但我无法使用QT中提供的qprinter实现此目标}

我已经在这里放置了一个包含长表格的HTML文件 - link。

提前感谢

1
如果您有一个表格并使用100％的宽度，那么我相信，它将根据您选择的媒体打印出100％的宽度，前提是该表格还具有父级100％的宽度。 - Nitesh
如果你有7列适合A4纸张大小，但是你有20列的话，所有的20列都会在表格中显示。因此，如果想要第8列从新的一页开始，这是不可能的，因为表格已经有了20列，除非创建新的表格并添加新的列。 - Nitesh
是的，我目前正在面临这个问题。是否有任何插件/库可以自动完成上述操作？[将宽表转换为多个较短的表] - clearScreen
4
如果不需要大规模修改，建议您将它们制作成“divs”，因为它们“可能”可以按照您的要求工作。 - Nitesh
4
如何将过长的HTML表格换行到下一行？如何将过长的HTML表格换行到下一行？ - Arleigh Hix
显示剩余3条评论
3个回答
7

表格无法在新行中断其列，您唯一能做的就是使表格宽度符合纸张宽度。

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

因此，您将将表格的最大宽度设置为2480像素，以使其不超过纸张大小。

假设您的表格id为“table”，则您的样式应该是：

<style>
  #table{
    max-width: 2480px;
    width:100%;
  }
  #table td{
    width: auto;
    overflow: hidden;
    word-wrap: break-word;
  }
</style>
4
如果您想获得良好的可打印表格，建议使用
而不是表格。使用
可以更好地控制其显示方式，也比，和
等标签更容易样式化。
以下是我所做的：
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;
}

您可以根据需要进行定制。
Fiddle: div-table-printable 您可以使用table-to-divs将带有<table>的html转换为<div>。
其他参考： printing-html-table CSS2PDF
你能建议一下如何使用 div 处理 rowspan 或 colspan 大于 1 的表格单元格吗？在转换为 divtable 后，它会使得一个列头为空。 - SajanGohil
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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接