打印大型HTML表时如何处理换页

我有一个项目，需要打印一个有很多行的HTML表。

我的问题是表格打印多页的方式。它有时会把一行切成两半，使它无法阅读，因为一半在一页的流血边缘，剩下的打印在下一页的顶部。

我能想到的唯一可行的解决方案是使用堆叠的div而不是一个表，并在需要时强制换页。但在经历整个变化之前，我想我可以在这里问一下。

当前回答

接受的答案在所有浏览器中都不适用，但以下css确实适用于我:

tr    
{ 
  display: table-row-group;
  page-break-inside:avoid; 
  page-break-after:auto;
}

html的结构是:

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    ...
  </tbody>
</table>

在我的例子中，有一些附加的问题与头tr，但这解决了原来的问题，保持表行中断。

由于标题的问题，我最终以:

#theTable td *
{
  page-break-inside:avoid;
}

这并没有阻止行断裂;只是每个单元格的内容。

2015-04-01 19:20:14

其他回答

接受的答案在所有浏览器中都不适用，但以下css确实适用于我:

tr    
{ 
  display: table-row-group;
  page-break-inside:avoid; 
  page-break-after:auto;
}

html的结构是:

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    ...
  </tbody>
</table>

在我的例子中，有一些附加的问题与头tr，但这解决了原来的问题，保持表行中断。

由于标题的问题，我最终以:

#theTable td *
{
  page-break-inside:avoid;
}

这并没有阻止行断裂;只是每个单元格的内容。

2015-04-01 19:20:14

在Chrome中，没有一个答案对我有用。AAverin在GitHub上创建了一些有用的Javascript，这对我来说很有用:

只需将js添加到您的代码中，并将类'splitForPrint'添加到您的表中，它将整齐地将表分割为多个页面，并将表头添加到每个页面。

2013-11-15 16:25:21

我有一张这样的脸。你可以使用CSS属性来解决这个问题。

    @media print {
       table{page-break-after: auto;}
   }

注意: 不能对空元素或绝对定位的元素使用此属性。

2022-09-26 04:21:38

我最近用一个很好的解决方案解决了这个问题。

CSS:

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

JS:

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

效果好极了!

2015-06-30 15:25:53

使用这些CSS属性:

page-break-after

page-break-before

例如:

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

via

2009-11-19 14:26:00

打印大型HTML表时如何处理换页

推荐文章

最新文章

标签