如何解决使用 rowspan 的表中的分页符
我试图在打印表格时进行分页。 我以前做过这个，但这张表不起作用。 我看到的唯一区别是该表使用了行跨度。 rowspan 是否会中断 page-break-before:always 或其他什么？
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<style>
body{
font-family:"arial";
font-size:14px;
}
@media print{
@page {size: landscape}
table tr { page-break-inside:avoid; page-break-after:auto }
table td { page-break-inside:avoid; page-break-after:auto }
tr.tableBreak{
page-break-before:always !important;
border:2pt solid #000;
}
tr.tableBreak td{
text-align:center;
}
}
</style>
</head>
<body>
<button onclick="window.print()">print</button>
<table id="crTable">
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>2201228506</td>
<td rowspan='2'>12/28/2020<br>01/02/2021</td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>2201230521</td>
<td rowspan='2'>12/30/2020<br>01/04/2021</td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>2201230522</td>
<td rowspan='2'>12/30/2020<br>01/04/2021</td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>2201230526</td>
<td rowspan='2'>12/30/2020<br>01/04/2021</td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>2201230531</td>
<td rowspan='2'>12/30/2020<br>01/04/2021</td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>H2O-Faucet-12-27</td>
<td rowspan='2'>12/27/2020<br></td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr class='tableBreak'>
<td colspan='11'>** SHOULD BE NEW PAGE **</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>H2O-Vat1-12-28</td>
<td rowspan='2'>12/28/2020<br></td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>H2O-Vat2-12-28</td>
<td rowspan='2'>12/28/2020<br></td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>H2O-Faucet-12-29</td>
<td rowspan='2'>12/29/2020<br></td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>H2O-Vat1-12-30</td>
<td rowspan='2'>12/29/2020<br></td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
<tr>
<td rowspan='2'></td>
<td rowspan='2'></td>
<td rowspan='2' class='cwGreen'>H2O-Vat2-12-30</td>
<td rowspan='2'>12/29/2020<br></td>
<td rowspan='2'></td>
<td class='ctr'>Purple Pink<br>Cocci Rod</td>
<td class='ctr'>Pos Neg</td>
<td class='ctr'>____/____</td>
<td class='ctr'>UI</td>
<td rowspan='2'></td>
<td rowspan='2'></td>
</tr>
<tr>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
<td>
<div class='crSmall'>date/tech</div>
</td>
</tr>
</table>
<p style="page-break-before: always;">test1</p>
<p style="page-break-before: always;">test2</p>
</body>
</html>
在我的小提琴中，我还放了几个 P 标签只是为了测试课程。 jsfiddle
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
