问题描述
我试图在打印表格时进行分页。 我以前做过这个,但这张表不起作用。 我看到的唯一区别是该表使用了行跨度。 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 (将#修改为@)