我正在使用PHP脚本生成用于显示测量结果的表格。 它工作正常,但在打印时我在表行内的分页符上遇到了一些麻烦。
<tr>
与行距的边界继续在页面的页脚/页眉上,分页符不起作用。
我尝试了几种方法,但没有任何变化:page-break-inside : avoid
在此表中不起作用。
你有个主意吗?还是看到任何错误?
感谢您的帮助! :)
编辑: 实际上,在进行了许多其他测试之后,如果您设置display:block,则page-break-inside:避免将起作用。 但是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>
答案 0 :(得分:0)
Chrome声称支持break-inside: avoid
上的tr
,但不支持td
(请参阅https://crbug.com/547972)。您是否尝试过break-inside: avoid-page;
而不是page-break-inside: avoid
?它们应该是别名,但是Chrome在这里可能有错误。