html - 打印网页时页面显示不正确

Question

我在打印页面时遇到问题。我正在尝试打印 N 个学生的成绩单。当我尝试打印页面时，三四页看起来不错， 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%;
   }
 }