如何在CSS中自动创建分页符？

Question

我创建了一个包含表格行的网页。按下打印按钮时效果很好。但有时分页会切断页面中间的区域。我尝试使用tbody作为这个

<table>
...
<tbody>
<tr><td>sample datea 1</td></tr>
<tr><td>sample datea 2</td></tr>
<tr><td>sample datea 3</td></tr>
</tbody>
<tbody>...</tbody>
...
</table>

当我想要打印页面时，它会写为

//first page  
sample datea 1 
sample datea 2 
// second page
sample datea 3 

我想在样本日期之后剪切3。我试图将blokla的div标签CSS添加为

.blokla{display:block;page-break-inside:avoid; page-break-after:auto}

如何在div标签或其他标签之间中断页面？我的主要问题如下。

Answer 1

你拥有的CSS是有效的，并在我的最终工作。

但是，您遇到的问题是您在一个表中创建了两个<tbody>标记。 这种做法不是有效的＆＃34; HTML （它是有效的）。只使用一个<tbody>并使用此CSS;

tr{page-break-inside:avoid; page-break-after:auto}

以这种方式更改CSS可确保HTML的最大灵活性，现在每行的演示文稿将保持在一起。

Answer 2

我用这段代码解决了这个问题

tbody{page-break-inside:avoid; page-break-after:auto; position:relative;
display:block;}

工作正常。