CSSとjavascriptを使ってHTMLを印刷するにはどうすればいいですか？

Question

ブラウザの[印刷]ビューに問題があります。 Webブラウザの表示には最適ですが、印刷ビューでは同じではありません。 たとえば、余白の設定や印刷ビューの[余白の設定]が機能していません。 また、テーブルを印刷ビュー（垂直方向）に回転させることは、私にはあまり馴染みがありません。 HTML、CSS、およびJavaScriptを使用した場合の問題をどのように処理できますか？

Answer 1

             
  
 
   
 
    
 body { 
 
      margin: 0; 
 
      padding: 0; 
 
      background-color: #FAFAFA; 
 
      font: 12pt "Tahoma"; 
 
     } 
 
     * { 
 
      box-sizing: border-box; 
 
      -moz-box-sizing: border-box; 
 
     } 
 
     .page { 
 
      width: 21cm; 
 
      min-height: 29.7cm; 
 
      padding: 2cm; 
 
      margin: 1cm auto; 
 
      border: 1px #D3D3D3 solid; 
 
      border-radius: 5px; 
 
      background: white; 
 
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); 
 
     } 
 
     .subpage { 
 
      padding: 1cm; 
 
      border: 5px red solid; 
 
      height: 256mm; 
 
      outline: 2cm #FFEAEA solid; 
 
     } 
 
     
 
     @page { 
 
      size: A4; 
 
      margin: 0; 
 
     } 
 
     @media print { 
 
      .page { 
 
       margin: 0; 
 
       border: initial; 
 
       border-radius: initial; 
 
       width: initial; 
 
       min-height: initial; 
 
       box-shadow: initial; 
 
       background: initial; 
 
       page-break-after: always; 
 
      } 
 
     }
 
    
<div class="book"> 
 
     <div class="page"> 
 
      <div class="subpage">Page 1/2</div>  
 
     </div> 
 
     <div class="page"> 
 
      <div class="subpage">Page 2/2</div>  
 
     </div> 
 
    </div>