在單獨的頁面上打印多個div 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修復這個固定的情況。