我正试图使用window.print()打印页面。但是,当行条目是倍数并且显示在另一页中时,另一页表的页眉将在两页之间分开。这是我得到的截图。
html - 表格标题在Chrome的打印窗口中分为两页-LMLPHP
这是我的全部代码:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>atop</title>
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assests/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assests/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assests/css/bootstrap-theme.css">
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assests/css/bootstrap-theme.min.css">
  <script src="<?php echo base_url();?>assests/js/jquery.min.js"></script>
  <script src="<?php echo base_url();?>assests/js/bootstrap.min.js"></script>
  <script src="<?php echo base_url();?>assests/datatables/jquery.dataTables.min.js"></script>
  <script src="<?php echo base_url();?>assests/datatables/dataTables.bootstrap.min.js"></script>
  <script type="text/javascript" language="javascript" src="<?php echo base_url();?>assests/js/livejquery.js"></script>
  <script type="text/javascript" src="<?php echo base_url();?>assests/js/json2.js"></script>
  <style type="text/css">


    body {
      background-color: #fff7b3;
      /*font-size: 20px;*/
    }

    #border_setting {
      border-style: solid;
      border-color: #847259;
      border-radius: 20px;
      padding-bottom: 9px;
      padding-right: 20px;
    }

    #font_white {
      color: #ffffff;
    }

    #logo_setting{
      padding-left: 50px;
    }

    #personal_table {
      margin-top:25px;
      padding-top:25px;
    }
    table, td, th {
      border: 1px solid #847259;
      text-align: left;
    }

    table {
      border-collapse: collapse;
      width: 100%;
      position: relative;
    }

    th, td {
      padding: 15px;
    }


    @media print {
   thead {
    page-break-inside:avoid;
        /*page-break-inside:always;*/
        /*page-break-before: avoid;*/
        /*page-break-after: avoid;*/
        /*position:initial;*/
    }


}

    /*table { page-break-inside:always; page-break-after:always; }*/

    /* div   { page-break-inside:avoid; }*/ /* This is the key */

    /*tr    { page-break-inside:always; page-break-after:always; }
    td    { page-break-inside:always; page-break-after:always; }
*/

    /*thead { display:table-header-group; }
    tfoot { display:table-footer-group; }*/
    #invoice_border {
      border-radius: 25px;
      border-color: black;
      background-repeat: repeat;
    }
  </style>
</head>
<body onload="window.print();">
 <!-- <div class="wrapper">
 -->
  <!-- Content Wrapper. Contains page content -->
  <!-- <div class="content-wrapper"> -->


   <!-- Main content -->    <!-- title row -->

<!--
<div class="row">
    <div class="col-md-1">
        <img src="../../image/GURUKRUPA-LOGO-transparent-512 x 512.png" width="100px" height="100px">


        <h1>Hello</h1>
    </div>

    <div class="col-md-11">
        <h1>Hello</h1>
    </div>
</div>
-->

    <!--<div class="row invoice-info">
        <div class="col-xs-2 invoice-col">
        -->



        <!--</div>
        <div class="col-xs-10 invoice-col">
        <h1>GuruKrupa Offset</h1>
        </div>table
    </div>
-->
<!-- /.col -->

<!-- info row -->
<div class="row">
  <img src="<?php echo base_url();?>assests/images/atop logo.png">

  <br>
  <br><br>

  <div class="col-xs-10 invoice-col">
    To ,
    <address>
      <strong><?php echo $customer_name;?></strong>
      <br><?php echo $address;?>
      <br><b>Phone: </b><?php echo $mobile;?>
      <br><b>Tin No.:</b><?php echo $tin;?>
    </address>
  </div>
  <!-- /.col -->
  <div class="pull-right invoice-col"  id="invoice_border">
    <b>Invoice : <?php echo $bil_no;?></b><br>
    <b>Date :</b> <?php echo date('d-m-Y', strtotime($date));?>
  </div>

  <!-- /.col -->
</div>
<!-- /.row -->

<!-- Table row -->
     <!--  <div class="row">
     <div class="col-xs-12"> -->


      <table class="table table-striped">
        <thead>
          <tr>
            <th>Date</th>
            <th>DC. No.</th>
            <th>Description</th>
            <th>Size</th>
            <th>Set</th>
            <th>Color</th>
            <th>Plate</th>
            <th>Rate</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach($total as $object)
          { ?>
          <tr>
            <td width="110px"><?php echo date('d-m-Y', strtotime($object['adate']));?></td>
            <td><?php echo $object['id'];?></td>
            <td width="25%"><?php echo $object['details'];?></td>
            <td width="6%"><?php echo $object['plate_size'];?></td>
            <td><?php echo $object['plate_set'];?></td>
            <td><?php echo $object['color'];?></td>
            <td width="6%"><?php echo $object['quantity'];?></td>
            <td><?php echo $object['rate'];?></td>
            <td><?php echo $object['amount'];?></td>
          </tr>
          <?php } ?>
        </tbody>
      </table>


      <!-- </div> -->
      <!-- /.col -->
      <!-- </div> -->
      <!-- /.row -->

      <div class="row">
        <div class="col-xs-6"></div>
        <div class="col-xs-6">
          <div class="table-responsive" style="margin-left:100px">
            <table class="table">
              <tr>
                <th style="width:68%">Grass Total</th>
                <td><?php echo $total[0]['sum'];?></td>
              </tr>
              <tr>
                <th>Vat (4%)</th>
                <td><?php echo $total[0]['vat'];?></td>
              </tr>

              <tr>
                <th>Tax (1%)</th>
                <td><?php echo $total[0]['tax'];?></td>
              </tr>
              <tr>
                <th>Total:</th>
                <td><?php echo $total[0]['total_amount'];?></td>
              </tr>
            </table>
            <br>
          </div>
        </div>
        <!-- /.col -->
      </div>

      <div class="row">
        <div class="col-xs-4" style="margin-top:50px">
          <h4><b>Rules</b></h4>
          <p>1. Payment should be made with in 30 days otherwise.</p>
          <p>2. 18% interest will be chenged extra.</p>
          <p>3. All taxes will be collected as abd when levide.</p>
          <p>4. Subject to Ahmedabad Jurisdiction.</p>
        </div>

        <div class="col-xs-4" style="margin-top:220px">
          <br>
          <br>
          <h6><b>E.&O.E.</b></h6>
        </div>

        <div class="col-xs-4" style="margin-top:140px">
          <h5><b>For, ATOP</b></h5>
          <br>
          <br>
          <h6>Autho.  Signature</h6>
        </div>
      </div>

      <!-- /.row -->

      <!-- this row will not appear when printing -->


    <!-- /.content -->
  <!-- </div> -->
  <!-- /.content-wrapper -->
<!-- </div> -->
<!-- ./wrapper -->

<!-- AdminLTE App -->
<script src="<?php base_url();?>dist/js/app.min.js"></script>
</body>
</html>

我在mozilla中试过这段代码,它运行正常,但在chrome中没有。

最佳答案

我过去成功地使用过page-break-inside: avoid;。我建议你试试。

09-17 07:37