我有一个项目，需要打印一个有很多行的HTML表。
我的问题是表格打印多页的方式。它有时会把一行切成两半，使它无法阅读，因为一半在一页的流血边缘，剩下的打印在下一页的顶部。
我能想到的唯一可行的解决方案是使用堆叠的div而不是一个表，并在需要时强制换页。但在经历整个变化之前，我想我可以在这里问一下。
当前回答
注意:当使用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>
其他回答
我最终遵循了@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)。我不确定我是否提出了这个问题的其他答案的新解决方案，但我想这可能会帮助到一些人。
注意:当使用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>
好男人……上面的大多数解都没用。这就是我的工作方式。
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>
第一组头部被用作一个假的，这样就不会有一个丢失的顶部边界在第二个头部(即。原始页头)，而分页。
我面对同样的问题，到处寻找解决方案，最后，我找到了适合我的所有浏览器的解决方案。
html {
height: 0;
}
使用这个css或代替css，你可以有这个javascript
$("html").height(0);
希望这对你也有用。
接受的答案在所有浏览器中都不适用，但以下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;
}
这并没有阻止行断裂;只是每个单元格的内容。
