CSS：page-break-inside：避免在表格行中不起作用

Question

我正在使用 PHP 脚本生成一个表格来显示测量结果。 它运行良好，但是在打印时，表格行内的分页符出现了一些问题。

<tr>的边框与行跨度在页脚 / header 上继续，分页符不起作用。

我尝试了几种方法，但没有任何改变： page-break-inside: avoid在此表中不起作用。

你有想法吗？ 或者你有什么错误吗？

谢谢你的帮助：：）

编辑：事实上，经过许多其他测试，page-break-inside:avoid 如果设置 display:block 将起作用。 但是 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>

Answer 1

Chrome 声称支持break-inside: avoid使用tr而不是td （参见https://crbug.com/547972 ）。 你试过break-inside: avoid-page; 而不是page-break-inside: avoid ? 他们应该是别名，但也许 Chrome 在这里有一个错误。

CSS：page-break-inside：避免在表格行中不起作用

问题描述

1 个解决方案

解决方案1
0 2019-09-28 19:19:00

CSS：page-break-inside：避免在表格行中不起作用

问题描述

1 个解决方案

解决方案1 0 2019-09-28 19:19:00

解决方案1
0 2019-09-28 19:19:00