我有一个项目需要打印一个多行的 HTML 表格。
我的问题是表格打印在多页上的方式。它有时会将一行切成两半，使其无法阅读，因为其中一半位于页面的边缘，而其余部分则打印在下一页的顶部。
我能想到的唯一可行的解决方案是使用堆叠的 DIV 而不是表格，并在需要时强制分页。但在完成整个更改之前，我想我可以先在这里问一下。
【问题讨论】：
thead {display: table-header-group; } 将 <thead> 添加到您的表中，以便在所有后续页面上打印表头（对于 loooooong 数据表很有用） .
标签： html css printing html-table
使用这些 CSS 属性：
page-break-after
page-break-before
例如：
<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>
<body>
....
</body>
</html>
【讨论】：
<!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 时，它会在表格的最后一位之后创建一个分页符，每次最后都会创建一个完全空白的页面！ 要解决此问题，只需将其更改为 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，它可以工作，但会弄乱您的表格布局。
【讨论】：
$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});
tr { display: block; } 用于仅打印，而不是添加所有无关的<div> 元素。 （尚未测试但值得一看）
这里的答案在 Chrome 中都不适合我。 GitHub 上的 Averin 创建了 some useful Javascript for this purpose，这对我有用：
只需将 js 添加到您的代码中并将“splitForPrint”类添加到您的表格中，它就会将表格整齐地拆分为多个页面并将表格标题添加到每个页面。
【讨论】：
splitForPrint，但在 JS 中，没有任何地方使用类名splitForPrint 引用元素。只有var splitClassName = '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 风格：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;
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 的方法，并进行了一些调整（可能是特定于引导程序 3 的）。
基本上；我们不能破坏trs 或tds，因为它们不是块级元素。所以我们将divs 嵌入到每个中，并将我们的page-break-* 规则应用于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>
margin 和 padding 调整对于抵消引入的某种抖动是必要的（根据我的猜测 - 来自引导程序）。我不确定我是否会从这个问题的其他答案中提出任何新的解决方案，但我认为这可能会对某人有所帮助。
【讨论】：
我已经尝试了上面给出的所有建议，并为这个问题找到了简单且有效的跨浏览器解决方案。此解决方案不需要样式或分页符。对于解决方案，表格的格式应为：
<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>
以上格式测试并在跨浏览器中工作
【讨论】：
伙计们...这里的大多数解决方案都不起作用。所以这就是我的工作方式..
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);
希望这对你也有用。
【讨论】：