javascript - 多页打印表格数据

Question

如何根据group类型将上面的表格数据分别打印成两页？这可以通过 window.print 和一些 css 和 javascript 调整来实现吗？

欢迎任何想法/建议。

Answer 1

那么，当表格从“Teddy Bear”group 切换到“Baby Bear”时，您希望它出现在新页面上吗？

如果是，则用单独的 <thead> 构建表和 <tbody>部分，像这样:

<table>
    <thead>
        <tr class="pageBreak">
            <th>Child</th>
            <th>Group</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alberto</td>
            <td>Teddy Bear</td>
        </tr>
        <tr>
            <td>Guadalupe</td>
            <td>Teddy Bear</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Carlos</td>
            <td>Baby Bear</td>
        </tr>
        <tr>
            <td>Oswaldo</td>
            <td>Baby Bear</td>
        </tr>
    </tbody>
</table>

注意不同的组在不同的<tbody>

然后你可以像这样使用 CSS:

tbody {page-break-after:always;}

而且这些组将打印在不同的页面上，而且在大多数浏览器中，标题会重复。

打印或打印预览 this example at jsBin .