ページブレーク、境界線などページを印刷するときにCSSが機能しない

Question

これを動作させるためにすべてを試しましたが、ページの一部を印刷しようとすると改ページと表の境界線が正しく表示されません。示す場合には、印刷プレビューすべてがちょうど境界線なしまたはページ区切り付きテキスト形式のように現れます。..

ここPlunker例： だけでプレビューを表示するために、プリントをクリックし

https://plnkr.co/edit/xR9RXEzbfKX8Kc7RRP7V?p=preview

HTML：

<a class="btn btn-default" (click)="print()">print</a> 

<div class="book" id="print"> 
    <div class="page break-after" *ngFor="let p of pages; let i = index"> 

    Side {{i + 1}}/100 

    <div class="subpage"> 

     <table style="width:100%"> 
     <tr class="table-header"> 
      <th>Postnr</th> 
      <th>NS-kode/Tekst</th> 
      <th>Enhet</th> 
      <th>Mengde</th> 
      <th>Pris</th> 
      <th>Sum</th> 
     </tr> 

     <!-- space --> 
     <tr class="table-body"> 
      <td>&nbsp;</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <tr class="table-body"> 
      <td>07</td> 
      <td class="chapter-title">Stålkonstruksjoner</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <!-- space --> 
     <tr class="table-body"> 
      <td>&nbsp;</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <tr class="table-body"> 
      <td>07.26</td> 
      <td class="chapter-title">Yttertak</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <!-- space --> 
     <tr class="table-body"> 
      <td>&nbsp;</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <tr class="table-body"> 
      <td>07.23.1</td> 
      <td>PB1.322A</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr class="table-body"> 
      <td></td> 
      <td>FAGVERK MED SVEISTE FORBINDELSER</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 

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


    <div class="page break-before"> 
    <div class="subpage">Page 2/2</div> 
    </div> 
</div> 

CSS：

.book { 
    float: none; 
} 

.page { 
    width: 210mm; 
    min-height: 297mm; 
    margin: 10mm auto; 
} 

.subpage { 
    padding: 1cm; 
    border: 1px black solid; 
    box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3); 
    height: 297mm; 
    background: white; 
} 

td { 
    padding-left: 2mm; 
} 

tr.table-header, 
tr.table-header>th { 
    border: 1px solid black; 
    text-align: center; 
} 

tr.table-body, 
tr.table-body>td { 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
} 

tr.table-body:last-child { 
    border-bottom: 1px solid black; 
} 

.chapter-title { 
    font-weight: bold; 
    text-decoration: underline; 
} 

.break-after { 
    display: block; 
    page-break-after: always; 
    position: relative; 
} 

.break-before { 
    display: block; 
    page-break-before: always; 
    position: relative; 
} 

@page { 
    size: A4; 
    margin: 0; 
} 

@media print { 
    html, 
    body { 
    width: 210mm; 
    height: 297mm; 
    } 
    div { 
    overflow: initial !important; 
    float: none !important; 
    } 
    .book { 
    float: none !important; 
    } 
    .page { 
    margin: 0; 
    border: initial; 
    border-radius: initial; 
    width: initial; 
    min-height: initial; 
    box-shadow: initial; 
    background: initial; 
    page-break-after: always; 
    page-break-inside: avoid; 
    float: none !important; 
    } 
    /* table { 
    float: none !important; 
    } 
    .page-break { 
    page-break-inside: avoid; 
    page-break-before: always; 
    } 
    .dont-print { 
    display: none; 
    } */ 
    /* .subpage { 
    page-break-after: always; 
    } */ 
} 

親要素、ページ区切り前、オーバーフロー初期などで浮動小数点なしを試みました。しかし効果はありません。

Answer 1

"print（）"メソッドを呼び出すと、新しいウィンドウが開きます。したがって、新しいウィンドウに含まれるコンテンツに対して、インラインスタイルまたはスタイルシートを新しいウィンドウでロードする必要があります。

Answer 2

Ctrl + がこれに最適です。以前は同じ問題があった。