如何在打印大型HTML表格时处理分页符

218

我的问题是表打印在多页的方式。它有时会将一行切成两半，使其不可读，因为其中一半位于页面的出血边缘，其余的位于下一页的顶部。

唯一可行的解决方案，我能想到是用堆叠的DIV来代替，如果需要一张桌子和力页游..但之前通过整个变化会我以为我可以问前这里。

2009-11-19 h3.

+21

在一个正切值上，可能值得在表中添加一个''，其中包含以下css'thead {display：table-header-group; }'以便在随后的所有页面上打印表头（对于loooooong数据表有用）。 – 2009-11-19 14:38:26

218

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tbody> 
     <tr> 
      <td>x</td> 
     </tr> 
     <tr> 
      <td>x</td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

来源

2009-11-19 14:31:42

这不适用于所有浏览器。它似乎在FireFox 3.6 Mac OS中有效。 – daustin777 2010-10-08 14:23:31

不幸的是，它似乎无法在FF4 @ W7 – 2011-05-08 14:15:56

+14

这也失败了WebKit浏览器（例如Safari和Chrome） – 2012-03-14 19:51:03

使用这些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 marcgg

它适用于表格行吗？ – 2009-11-19 14:27:00

我不确定，你必须检查。如果没有，分割成不同的数组，并用空的div – marcgg 2009-11-19 14:27:34

（或“table”元素）将数组分开 – marcgg 2009-11-19 14:28:24

注：使用分页-后，当：总是为标记它将在表的最后一位之后创建一个分页符，在末尾创建一个完全空白的页面时间！要解决这个问题，只需将其更改为page-break-after：auto。它会正确打破，而不是创建一个额外的空白页面。

<html> 
<head> 
<style> 
@media print 
{ 
    table { page-break-after:auto } 
    tr { page-break-inside:avoid; page-break-after:auto } 
    td { page-break-inside:avoid; page-break-after:auto } 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
} 
</style> 
</head> 

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

来源

2011-10-14 05:07:46

非常感谢！这是唯一的工作！ – Maria 2016-11-23 07:22:34

在Chrome上适用于我，是一个不错的普通CSS解决方案。 – Ryan 2017-02-14 09:28:26

从思南Ünür解决方案扩展：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    table { page-break-inside:auto } 
    div { page-break-inside:avoid; } /* This is the key */ 
    thead { display:table-header-group } 
    tfoot { display:table-footer-group } 
</style> 
</head> 
<body> 
    <table> 
     <thead> 
      <tr><th>heading</th></tr> 
     </thead> 
     <tfoot> 
      <tr><td>notes</td></tr> 
     </tfoot> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <tr> 
      <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td> 
     </tr> 
     <!-- 500 more rows --> 
     <tr> 
      <td>x</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

看来，分页，里面：避免在某些浏览器只考虑采取块元素，而不是细胞，表，行也不inline-block的。

如果试图为display：block TR标记，并使用有分页，里面：避免，它的工作原理，但与你的表格布局游手好闲。

来源

2013-09-11 14:03:43 vicenteherrera

下面是使用jquery动态添加div的简单方法：'$（document）.ready（function（）{$（“table tbody th，table tbody td”）。wrapInner（“

”）;}）;' – 2014-09-11 05:26:26

谢谢@ Chrisbloom7，这可能非常有用！ ;-) – vicenteherrera 2014-09-12 11:15:45

感谢sinanürün，vicenteherrera和Chrisbloom7。我应用了你的答案的组合，现在它的工作！ – 2016-08-03 08:31:41

的答案都不在Chrome这里为我工作。 AAverin在GitHub上创造some useful Javascript for this purpose这个工作对我来说：

的JS只需添加到您的代码和类“splitForPrint”添加到您的表，它会在桌子整齐地分割成多个页面，并在表头添加到每个页。

来源

2013-11-15 16:25:21 MDave

您有关于如何应用此示例的示例吗？我一直试图将我的表className指定为'splitForPrint'，但在JS中没有任何地方使用className'splitForPrint'引用元素。只有'var splitClassName ='splitForPrint';'就是这样的部分。 – 2014-08-20 03:05:12

向下投票是因为您链接的脚本不能解决OP的问题而没有相当多的挑选和重新配置，并且您没有提供任何关于如何执行此操作的示例。 – 2014-09-12 15:05:45

在Mac上的Chrome v39上无法正常工作 – sirjay 2014-12-09 08:44:50

-2

接受的答案并没有在所有浏览器为我工作，但下面的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>

在我的情况下，有一些thead tr的其他问题，但是这解决了保持表行不被打破的原始问题。

由于头的问题，我最终结束了：

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

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

来源

2015-04-01 19:20:14

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

的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

我检查了很多解决方案，任何人都不太好。

于是，我一个小窍门，它的工作原理：风格

TFOOT：position: fixed; bottom: 0px; 被放置在最后一页的底部，但如果页脚太高它是由表中的内容重叠。

TFOOT只有：display: table-footer-group; 是不重叠的，但不是最后一页的底部...

让我们放了两个TFOOT：

TFOOT.placer { 
 
    display: table-footer-group; 
 
    height: 130px; 
 
} 
 

 
TFOOT.contenter { 
 
    display: table-footer-group; 
 
    position: fixed; 
 
    bottom: 0px; \t 
 
    height: 130px; 
 
}

<TFOOT class='placer'> 
 
    <TR> 
 
    <TD> 
 
     <!-- empty here 
 
--> 
 
    </TD> 
 
    </TR> 
 
</TFOOT> \t 
 
<TFOOT class='contenter'> 
 
    <TR> 
 
    <TD> 
 
     your long text or high image here 
 
    </TD> 
 
    </TR> 
 
</TFOOT>

一保留在非最后一页的地方，第二次放入你的惯用脚。

来源

2015-07-28 23:58:08

我结束了@ vicenteherrera的方法，并进行了一些调整（可能是引导3特定的）。

基本上;我们不能打破tr s或td s，因为它们不是块级元素。因此，我们将div嵌入到每个中，并将规则应用于div。其次;我们在每个div的顶部添加一些填充，以补偿任何样式文物。

<style> 
    @media print { 
     /* avoid cutting tr's in half */ 
     th div, td div { 
      margin-top:-8px; 
      padding-top:8px; 
      page-break-inside:avoid; 
     } 
    } 
</style> 
<script> 
    $(document).ready(function(){ 
     // Wrap each tr and td's content within a div 
     // (todo: add logic so we only do this when printing) 
     $("table tbody th, table tbody td").wrapInner("<div></div>"); 
    }) 
</script>

边距和填充调整是抵消引入的某种抖动所必需的（我的猜测 - 从bootstrap）。我不确定我是否从这个问题的其他答案中提出了任何新的解决方案，但我想这可能会帮助某人。

来源

2016-06-22 17:15:32 Aaron

-1

我已经尝试了上面给出的所有建议，并找到了针对此问题的简单和可用的跨浏览器解决方案。此解决方案不需要任何样式或分页符。对于解决方案，表的格式应该是这样的：

<table> 
    <thead> <!-- there should be <thead> tag--> 
     <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>--> 
    </thead> 
    <tbody><!---<tbody>also must--> 
     <tr> 
      <td>data</td> 
     </tr> 
     <!--100 more rows--> 
    </tbody> 
</table>

上面的格式测试和跨浏览器

来源

2017-03-13 06:42:30

不适用于铬（至少） – AriWais 2017-05-11 18:28:53

好，大家好工作......大多数解决方案在这里都没有工作了。所以，这是怎么工作对我来说..

HTML

<table> 
    <thead> 
    <tr> 
    <th style="border:none;height:26px;"></th> 
    <th style="border:none;height:26px;"></th> 
    . 
    . 
    </tr> 
    <tr> 
    <th style="border:1px solid black">ABC</th> 
    <th style="border:1px solid black">ABC</th> 
    . 
    . 
    <tr> 
    </thead> 
<tbody> 

    //YOUR CODE 

</tbody> 
</table>

第一组头被用作虚拟一个，这样不会有在第二头缺少顶部边框（即原头），而分页符。

来源

2017-07-06 07:41:53 Aneesh

如何在打印大型HTML表格时处理分页符

回答

相关问题