2

打印时是否可以强制表格及其第一行内容在同一页上？当表格前面有一些其他内容时，就会出现这个问题。该表如下所示：

<table>
   <caption>
      Title of the table
   </caption>
   <tbody>
     <tr>first row</tr>
     <tr>second row</tr>
     <---more rows--->
   </tbody>
</table>

任何人都知道如何在打印时强制表格及其第一行（或前几行）内容在同一页面上？我试图用一个 div 来掩盖标题及其前几行（假设高度为200px，并page-break-inside: avoid使用），这可行，但它将父容器垂直扩展了 200px（当我用一个假人进行测试时，只有一个表需要掩蔽网页）并引入一个空白页面。

Jsfiddle 用于不应用屏蔽时：https ://jsfiddle.net/8pk5L3jz/29/

这是描述我的问题的jsfiddlediv.mask的链接，添加的内容会导致表的容器扩展 200px，因此它可能会导致空白页面（在我的虚拟示例中）：https ://jsfiddle.net /8pk5L3jz/26/

4

1 回答 1

1

这应该工作：

table caption:first-child{
    page-break-after: avoid;  
}
table tr:first-child{
    page-break-after: avoid;
    page-break-before: avoid;
}
/* for n child */
table tr:nth-child(2),
table tr:nth-child(3){
   page-break-before: avoid;
}

用歌剧测试

来自 MDN 文档的注释

注意：此属性正在被更通用的 break-after 取代。这个新属性还处理列和区域中断，并且在语法上与 page-break-after 兼容。

于 2018-08-18T23:18:33.940 回答