我有一个项目，需要打印一个有很多行的HTML表。
我的问题是表格打印多页的方式。它有时会把一行切成两半，使它无法阅读，因为一半在一页的流血边缘，剩下的打印在下一页的顶部。
我能想到的唯一可行的解决方案是使用堆叠的div而不是一个表，并在需要时强制换页。但在经历整个变化之前，我想我可以在这里问一下。
当前回答
我有一张这样的脸。你可以使用CSS属性来解决这个问题。
@media print {
table{page-break-after: auto;}
}
注意: 不能对空元素或绝对定位的元素使用此属性。
其他回答
使用这些CSS属性:
page-break-after
page-break-before
例如:
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
via
我检查了许多解决方案，任何人都不能很好地工作。
所以我尝试了一个小技巧，它起作用了:
脚带风格:位置:固定;底部:0 px; 位于最后一页的底部，但如果页脚太高，则会与表的内容重叠。
只有Tfoot: display: table-footer-group; 没有重叠，但没有在最后一页的底部…
让我们放两个tfoot:
TFOOT。砂矿{ 显示:table-footer-group; 身高:130 px; } TFOOT。内容{ 显示:table-footer-group; 位置:固定; 底部:0 px; 身高:130 px; } < TFOOT类=“砂矿”> < TR > < TD > <！——此处为空 --> 道明> < / < / TR > < / TFOOT > < TFOOT类= >“内容” < TR > < TD > 你的长文字或高图像在这里 道明> < / < / TR > < / TFOOT >
一是在非最后一页保留位置，二是放在你的固定页脚。
<!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>
在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>
在我的例子中，有一些附加的问题与头tr，但这解决了原来的问题，保持表行中断。
由于标题的问题，我最终以:
#theTable td *
{
page-break-inside:avoid;
}
这并没有阻止行断裂;只是每个单元格的内容。