我有一个项目，需要打印一个有很多行的HTML表。
我的问题是表格打印多页的方式。它有时会把一行切成两半，使它无法阅读，因为一半在一页的流血边缘，剩下的打印在下一页的顶部。
我能想到的唯一可行的解决方案是使用堆叠的div而不是一个表，并在需要时强制换页。但在经历整个变化之前，我想我可以在这里问一下。
当前回答
使用这些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>
使用这些CSS属性:
page-break-after
page-break-before
例如:
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
via
在Chrome中，没有一个答案对我有用。AAverin在GitHub上创建了一些有用的Javascript，这对我来说很有用:
只需将js添加到您的代码中，并将类'splitForPrint'添加到您的表中，它将整齐地将表分割为多个页面，并将表头添加到每个页面。
从思南扩展Ü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标记，并使用there page-break-inside:avoid，它可以工作，但会打乱您的表布局。
我最终遵循了@vicenteherrera的方法，并进行了一些调整(可能是针对引导程序的)。
基本上;我们不能破坏trs或TDS，因为它们不是块级元素。因此，我们将div嵌入到每个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)。我不确定我是否提出了这个问题的其他答案的新解决方案，但我想这可能会帮助到一些人。
