I am trying to print the page using window.print(). but when the row entry is multiplies and it is being shown in the other page, the header of the other page's table is devided between both of the pages. Here is the screenshot of what i am getting.
Here is my all code:
<!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>
I have tried this code in mozilla and its working properly but not in chrome.
I have used
page-break-inside: avoid;successfully in the past. I would recommend you trying it.