我正在尝试使用 window.print() 打印页面。但是当行条目成倍增加并且显示在另一页中时，另一页表的标题在两个页面之间划分。这是我得到的屏幕截图。
这是我的全部代码:
<!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;。我建议您尝试一下。
关于html - 表格的标题在 chrome 的打印窗口中分为两页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41542138/