我正在使用 PHP 脚本生成一个表格来显示测量结果。它运行良好,但是在打印时,表格行内的分页符出现了一些问题。
具有行跨度的边框<tr>
继续在页面的页脚/页眉上,并且分页符不起作用。
我尝试了几种方法,但没有任何改变:page-break-inside : avoid
在此表中不起作用。
你有想法吗?或者你有什么错误吗?
谢谢你的帮助 !:)
编辑:事实上,经过许多其他测试,如果您设置 display : block,page-break-inside : Avoid 将起作用。但是 display:block 会破坏表格布局:/怎么可能做到这一点?谢谢
代码 :
<!DOCTYPE html>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Style CSS A garder -->
<STYLE>
html,body,h1,h2,h3,h4,h5,h6 {
font-family: "Times New Roman", "Arial", serif;
margin : 0px;
}
table,thead,tbody, tfoot{
border-collapse: collapse;
padding:0 !important;
margin:0 !important;
width : 100%;
}
TD {
padding : 2px;
}
.TrTdEntete{
padding:0 !important;
margin:0 !important;
}
.TableGenerale{
width : 100%;
}
.TableSecondeEntete{
width : 100%;
border: 1px solid black;
}
.TableContenu{
margin-top : 5px;
/*width : 1024px;*/
border: 1px solid black;
}
.TableGenerale td{
height : 30px;
margin-top : 0px;
}
.TableContenu td,th {
height : 30px;
margin-top : 0px;
border: 1px solid black;
}
/* page break ne fonctionne pas !!!*/
tr.page-break-avoid {
page-break-inside: avoid !important;
page-break-before: always !important;
}
td.page-break-avoid {
page-break-inside: avoid !important;
page-break-before: always !important;
}
.imgbanc {
width : 100%;
max-width : 100%;
height : 500px;
border: 1px solid black;
margin-top: 10px
}
.NOK{
color : RED;
}
#contenu{
padding : 5px;
}
@media print {
tr, td{
-webkit-column-break-inside: avoid !important; /* Chrome, Safari, Opera */
page-break-inside: avoid !important; /* Firefox */
break-inside: avoid !important; /* IE 10+ */
}
}
</STYLE>
</HEAD>
<BODY>
<TABLE class="TableGenerale"><THEAD>
<!-- Premiere Entête qui sera afficher à chaque debut de page --><TR><TD class="">[task-XXXX]</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR><TD class="" rowspan="1" colspan="3" >Lorem ipsum dolor sit amet</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><!-- Fin premiére entête --></THEAD><TBODY><!-- Partie affichée une seule fois --><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR><TD class="">Bench software version : $version</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><!-- Fin Partie affichée une seule fois -->
<TR class="TrTdEntete">
<TD class="TrTdEntete"colspan="6">
<TABLE class="TableSecondeEntete">
<THEAD>
<!-- Seconde Entête qui sera afficher à chaque debut de page --><TR><TD class="" rowspan="1" colspan="6" >Lorem ipsum dolor sit amet</TD></TR><TR><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet</TD><TD class="" rowspan="1" colspan="3" >Lorem ipsum dolor sit amet
</BR>Lorem ipsum dolor sit amet</TD><TD class="">STAMP</TD></TR><!-- Fin Seconde entête -->
</THEAD>
<TBODY>
<TR class="TrTdEntete">
<TD class="TrTdEntete" colspan="6" id="contenu">
<TABLE class="TableContenu">
<THEAD>
<!-- Troisiéme entête qui sera présente uniquement dans le tableau du contenu pvri --><TR><TD class="">Lorem ipsum dolor sit amet</TD><TD class="">MEASUREMENT</TD><TD class="">NOMINAL VALUE TOLERANCE</TD><TD class="" rowspan="1" colspan="2" >MEASURED VALUES</TD><TD class="">COMMENTS</TD></TR><!-- fin Troisiéme entête -->
</THEAD>
<tbody>
<!-- Corps du PVRI --><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="2" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="6" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=" page-break-avoid" rowspan="1" colspan="2" ></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=" page-break-avoid" rowspan="1" colspan="2" ></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="5" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=" page-break-avoid" rowspan="1" colspan="2" ></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=" page-break-avoid" rowspan="1" colspan="2" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class=" page-break-avoid" rowspan="15" colspan="1" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR class="page-break-avoid" ><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TD><TD class=""></TD></TR><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD></TR><!-- Fin du corps du PVRI -->
</tbody>
</table><!-- Fin de la zone PVRI -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<!-- Footer --><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class="">Lorem ipsum</TD></TR><TR><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class=""></TD><TD class="">June 15/18</TD></TR><!-- Fin Footer -->
</tfoot></table>
</BODY>
</HTML>