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导致表的容器扩大200px，因此可能导致空白页（在我的虚拟示例中确实如此）：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兼容。

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

1 个答案: