【发布时间】：2020-01-27 19:33:01
【问题描述】：
我正在使用 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>【问题讨论】：
-
Chrome 和 Firefox 在这里的行为是否相同？
标签： html css html-table page-break page-break-inside