打印时强制表格标题及其第一行在同一页上

Question

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

<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/

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

Answer 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;
}

通过歌剧测试

note from MDN doc

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