如何打印带有分页符的大型HTML表格？
如何打印带有分页符的大型HTML表格？
提问于 2013-03-11 13:22:11
我想打印一个大的HTML表格，而不中断每页末尾的行。我使用了以下代码，但它不起作用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</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>
<body>
<table border="1">
<?php
for($i=0;$i<50;$i++){
?>
<tr>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
</tr>
<?php
}
?>
</table>
</body>
</html>有人能帮帮忙吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-03-11 14:41:38
您可以尝试使用orphans指定页面底部留出的空行数；如果一个元素的布局与orphans设置冲突，则该元素将打印到下一页。不过，浏览器支持还是相当粗制滥造的。对于您的示例，我会将其设置为tr，如下所示：
tr{orphans:3}
Stack Overflow用户
发布于 2013-03-11 13:24:06
试一试
<table border="1">
<?php for($i=0;$i<50;$i++) { ?>
<tr>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
<td height="50" width="130">gukgu</td>
<td height="50" width="180" height="50" width="145">gukgu</td>
</tr>
<?php } ?>
</table>您将表标记放在for循环之前的for循环中。
Stack Overflow用户
发布于 2014-09-11 03:13:57
所有不是基于webkit的流行桌面浏览器(例如Firefox和Internet Explorer)现在都支持<tr>元素上的CSS声明page-break-inside: avoid;，这解决了这些浏览器中的OP问题。Webkit的支持显然仅限于块元素，因此Chrome、Safari和Opera在技术上还没有解决这个问题(我非常确定这里发布的其他解决方案都不会有帮助)。但是，可以通过将表转换为一堆牢不可破的块来模拟所需的行为。如果使用固定的列宽，则可以使用纯CSS完成此操作，如下所示：
<style>
table {border-collapse: collapse;}
table > tbody > tr {
display: block;
page-break-inside: avoid;
}
table > tbody > tr > td {
border: 2px solid black;
width: 100px;
max-width: 100px;
}
table > tbody > tr:first-child ~ tr > td {border-top: none;}
</style>
<table>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>Multiple<br/>lines of<br/>data</td>
</tr>
</table>如果您不想使用固定的列宽，那么您必须使用javascript来确保列宽不会因行而异。我的answer to another post演示了这样做的一种方法，但它包含了重复的表头，这使得它比本例中需要的复杂得多。不过，还是值得一看。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15331700
复制相关文章
相似问题