html - 在单独的页面上打印多个 div

Question

我正在使用 HTML 循环组表，我希望它能在另一页上打印每个表。为此，我遵循了从该页面找到的一些指南。起初我将我的 float 更改为内联 block ，然后我尝试使用 print.css 但它没有达到我想要的结果。

目前它显示两个表格，但是如果我尝试打印它，它将只显示一页。

图片 1: 图片 2:

从图片上看，page显示的是两张表，而print只想要打印一张，没有第二页。

CSS:

@media print {
@page {size: landscape}
.myDivToPrint {
    background-color: white;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
}

.breaker{
    /*page-break-after:always;*/
}
}

HTML:

<div class="container myDivToPrint">
    <div id="4table0" class="breaker">
    <table style="display: inline-block">
        <tr class="groupTableName">
            <td class='namefield'>Name 1</td>
        </tr>
        <tr class="groupTableName">
            <td class='namefield'>Name 2</td>
        </tr>
        <tr class="groupTableName">
            <td class='namefield'>Name 3</td>
        </tr>
        <tr class="groupTableName">
            <td class='namefield'>Name 4</td>
        </tr>
    </table>
    <table style="display: inline-block;margin-left: -5px">
        <tr class="groupTableRows">
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr class="groupTableRows">
            <td>&nbsp</td>
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr class="groupTableRows">
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr class="groupTableRows">
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>

    </table> 
    <table>
        <tr>
            <td>I VOOR</td>
            <td style="padding-left: 12px">1-4</td>
            <td style="padding-left: 12px">2-3</td>
        </tr>
        <tr>
            <td>II VOOR</td>
            <td style="padding-left: 12px">2-4</td>
            <td style="padding-left: 12px">1-3</td>
        </tr>
        <tr>
            <td>III VOOR</td>
            <td style="padding-left: 12px">3-4</td>
            <td style="padding-left: 12px">1-2</td>
        </tr>
    </table>
    <br>
    </div>

    <div id="5table0" style="padding-bottom: 5px" class="breaker">
    <table style="display: inline-block">
        <tr class="groupTableName">
            <td class='namefield'>Name 1</td>
        </tr>
        <tr class="groupTableName">
            <td class='namefield'>Name 2</td>
        </tr>
        <tr class="groupTableName">
            <td class='namefield'>Name 3</td>
        </tr>
        <tr class="groupTableName">
            <td class='namefield'>Name 4</td>
        </tr>
        <tr class="groupTableName">
            <td class='namefield'>Name 5</td>
        </tr>
    </table>

    <table style="display: inline-block; margin-left: -5px">
        <tr class="groupTableRows">
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr class="groupTableRows">
            <td>&nbsp</td>
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr class="groupTableRows">
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr class="groupTableRows">
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>
        <tr class="groupTableRows">
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
            <td class="groupTableRowsBACK">&nbsp</td>
            <td>&nbsp</td>
            <td>&nbsp</td>
        </tr>

    </table>
    </div> 
    </div>

PS:看起来 CSS 中的类中断器根本没有改变打印..

Answer 1

使用 page-break-after 属性:

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

More information