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

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

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

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

449283 次浏览
小开

使用这些CSS属性:

page-break-after


page-break-before

例如:

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


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

via

小开
最佳答案 
<!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>
小开
注意:当使用page-break-after:always for标签时，它将在表的最后一位之后创建一个分页符，每次都在末尾创建一个完全空白的页面! 要解决这个问题，只需将其更改为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>
小开

从思南扩展Ü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>

在某些浏览器中，page-break-inside:avoid似乎只被用于块元素，而不是单元格、表、行或内联块。

如果你尝试display:block TR标记，并使用那里的page-break-inside:avoid，它可以工作，但会打乱你的表布局。

小开

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

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

小开

接受的答案在所有浏览器中都不适用，但以下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;
}

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

小开

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

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();
}

效果好极了!

小开

我检查了许多解决方案，任何人都不能很好地工作。

所以我尝试了一个小技巧，它起作用了:

tfoot with style:position: fixed; bottom: 0px; 位于最后一页的底部，但如果页脚太高，则会与表的内容重叠

tfoot with only: display: table-footer-group; 没有重叠，但不在最后一页的底部

让我们放两个tfoot:

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


TFOOT.contenter {
display: table-footer-group;
position: fixed;
bottom: 0px;
height: 130px;
}
<TFOOT  class='placer'>
<TR>
<TD>
<!--  empty here
-->
</TD>
</TR>
</TFOOT>
<TFOOT  class='contenter'>
<TR>
<TD>
your long text or high image here
</TD>
</TR>
</TFOOT>

一是在非最后一页保留位置，二是放在你的固定页脚。

小开

我最终遵循了@vicenteherrera的方法，并进行了一些调整(可能是针对引导程序的)。

基本上;我们不能破坏__abc0或__abc1，因为它们不是块级元素。因此，我们将div嵌入到每个对象中，并对div应用page-break-*规则。其次;我们在每个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)。我不确定我是否提出了这个问题的其他答案的新解决方案，但我想这可能会帮助到一些人。

小开

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

<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>

以上格式已测试并可在跨浏览器中工作

小开

好男人……上面的大多数解都没用。这就是我的工作方式。

超文本标记语言

<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>

第一组头部被用作一个假的，这样就不会有一个丢失的顶部边界在第二个头部(即。原始页头)，而分页。

小开

我面对同样的问题，到处寻找解决方案，最后，我找到了适合我的所有浏览器的解决方案。

html {
height: 0;
}

使用这个css或代替css，你可以有这个javascript

$("html").height(0);

希望这对你也有用。

小开

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

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

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


提交答案