ページが印刷中に正しく表示されない

Question

ページの印刷中に問題があります。私はN個の学生用マークシートを印刷しようとしています。ページを印刷しようとすると、3ページまたは4ページに適しています。 its displays like this in three or four pages

しかし、その後、ページの内容が別のページと重なって表示されています。印刷用
the half of marksheet is displaying in one and half is in another

私のCSSコードは

@media print { 
     .page-break { display: block; page-break-before: always; } 
    @page 
    { 
     size: auto; /* auto is the initial value */ 
     margin-left: 2cm; 
     margin-right: 1cm; 
    page-break-after: always; 
    } 
    body * { 
    visibility: hidden; 

    } 

    #printtable, #printtable * { 


    visibility: visible; 

     page-break-after: always; 
      } 

    .printb{ 
     margin-top: -35px; 
    margin-bottom: -5px; 
    } 
    #printbtn{ 
      margin-top: -35px; 
      margin-bottom: -5px; 
      } 
    #img{ 
     width: 110px; 
     } 
     #cinfo{ 
      margin-left: -2.8cm; 
      } 
     #marks{ 
      height:100%; width:100%; 
      } 

     } 

であり、これは私の見解である

 <div class="col-md-12 printb" > 

    <?= Html::button('<i class="glyphicon glyphicon-print"></i> Print', ['class'=>'btn btn-default', 'id'=>'printbtn','style'=>'float: right']) ?> 
    </div> 
     //loop is used here 
     <div style=" height:750px;width:567px; margin-top:30px; float:left;" class="col-md-6" id="printtable"> 
    <div class="panel panel-default" > 
     <div class="panel-body"> 

      <div class="col-md-12"> <h3 class="text-center no-margin"></h3> 
       <table style="width:100%"><tr> <td style="width:10%"><div class="col-md-4" id="img"> <img src="<?= Yii::getAlias('@web') . "/images/logo.jpg" ?>" height="95px" width="95px" id="logo"/> </div></td> 
         <td ><div class="col-md-8" id="cinfo" style=""> 

      <h4 class="text-center text-bold"> 
     </h4> 
      <h4 class='text-center no-margin'>Student's Marksheet</h4> 
          </div></td></tr></table> 
      </div> 
      <hr/> 
      <center> 
       <div class='col-md-12'> 

        <table class='table-condensed'> 
         </table> 
       </div> 

       <table class='table-condensed table-bordered ' id="marks"> 
       </table> 
       <table class="table-condensed"> </table> 
       <br/> 
       <p class="text-center">Date: <?= date('Y-m-d') ?></p> 
      </center> 

     </div> 
    </div> 
    </div> 
    </div> 
     //loop ends 

誰かがどのようにこの問題を解決するために私を助けて？

Answer 1

は今その作業罰金私..私のコードは

@media print { 
    @page 
    { 
    size: auto; /* auto is the initial value */ 
    margin-left: 2cm; 
    margin-right: 1cm; /* this affects the margin in the printer settings */ 
    } 
    body * { 
    visibility: hidden; 
    } 

#printtable, #printtable * { 


visibility: visible; 


    } 
    #printtable{ 
    margin-bottom: 1cm; 
    page-break-after: always; /* breaks the page*/ 
    page-break-before: always; 
} 

.printb{ 
margin-top: 10px; 
    margin-bottom: 0px; 
    } 
#printbtn{ 
    margin-top: -35px; 
    margin-bottom: 5px; 
} 
#img{ 
    width: 110px; 
    } 
#cinfo{ 
    margin-left: -2.8cm; 
    } 
    #marks{ 
    height:100%; width:100%; 
    } 
}