打印时将 multiply html 表格分成不同的页面

Question

我有一个 HTML 页面显示如下内容：

<html>
    <table></table>
    <table></table>
    <table></table>
</html>

现在我调用 window.print()，并希望将每个 table 打印到不同的页面上。我该怎么做？

PS：每个table可能有不同的高度

Answer 1

将每个 table 放入 div，并将样式设置为 div，如下所示：

<div style="page-break-after:always;">

这个 "styling" 告诉浏览器，一旦 div 完成所有内容，它就应该开始在新页面上打印。我们也可以将相同的规则应用于页面上的所有 div，方法是将以下内容添加到其 header:

div {
page-break-after : always;
}

但是，您更有可能希望仅在某些元素之后而不是在每个段落之后应用中断。这就是为什么最好将样式应用到 dividually 或应用到一组可以选择性使用的元素，如 DIV.

阅读this了解更多信息...

Answer 2

您可以使用 page-break-after CSS 属性

<style>
    @media print
    {
        table {page-break-after:always}
    }
</style>

Answer 3

请为您的table指定分页符样式。

table{
page-break-after  : auto ;
}

有关分页符的更多信息，请go to link.

Answer 4

始终在每个元素后插入分页符（打印时）：

@media print {
    table{
          page-break-after: always;
    }
}

page-break-after 属性设置是否在指定元素之后出现分页符。

Divide multiply html tables into different pages when printing