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

Question

我正在使用HTML循环组表，我希望在另一页上打印每个表。为此，我遵循了本页的一些指导原则。起初我将我的浮动更改为内联块，然后我尝试使用print.css，但它没有达到我想要的结果。

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

图片1： 图2：

从图片中可以看出，虽然打印只打印一张而且没有第二页，但页面显示两张表。

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

Answer 2

显然遗漏了位置：修复了CSS修复此案例。