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

Question

我创建了一个包含表格行的网页。当我按下打印按钮时，它看起来不错。但有时分页符会在 block 的中间切割页面。我试着像这样使用 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 

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

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

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

Answer 1

您拥有的 CSS 有效并且适用于我。

但是您遇到的问题是您正在创建两个 <tbody>单个表中的标签。 这种做法不是“有效”的 HTML(它是有效的)。只使用一个 <tbody>并使用这个 CSS；

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

以这种方式更改 CSS 可确保您的 HTML 具有最大的灵 active ，现在每行的显示将保持在一起。