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

打印时是否可以强制表及其第一行内容位于同一页？当表前面有其他内容时，就会出现此问题。这张桌子看起来像是：

<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会导致表的容器扩展200px，因此可能会导致空页面（在我的虚拟示例中是这样的）：https://jsfiddle.net/8pk5L3jz/26/

最佳答案

这应该有效：

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

用opera测试
note from MDN doc
注意：此属性正在被后面更通用的分隔符替换。此新属性还处理列和区域分隔符，并且在语法上与之后的分页符兼容。

关于javascript - 打印时强制表标题及其第一行在同一页上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51912560/