Seeking assistance in printing a section of an HTML page using PHP with a large header space for empty space after printing. Despite multiple attempts, achieving the desired result in Chrome, but facing issues with Firefox, which adds an additional page before printing.
Why does Firefox insert an extra page with only the header when there is content or height set for the div or margin? The HTML code structure for printing is as follows:
<section class="panel" id="payablePrint">
<table>
<thead >
<tr>
<th style="width:100%">
<div id="print_header"style="opacity: 0.001;">
(Content)
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Footer content here...
</td>
</tr>
</tfoot>
</table>
</section>
<div class="row">
<div class="col-lg-12 text-right">
<button id="" onclick="printDiv('payablePrint')" class="btn btn-shadow btn-primary jdIconButton"><i class="fa fa-print"></i> Print Agreement</button>
</div>
</div>
CSS used for this structure:
@media print{
#print_header{
display: block;
}
#Footer{
display: none !important;
margin-bottom: 0px;
margin-top: 0px;
}
#printFooter {
display: block;
position: fixed;
bottom: 0px;
left: 154px;
}
.panel-footer{
border-top: none !important;
}
/* *************** */
thead { display: block; page-break-after: avoid;page-break-before: avoid;}
table { page-break-after:auto; }
tr { page-break-inside:avoid; page-break-after:auto; }
td { page-break-inside:avoid; page-break-after:auto; }
thead { display:table-header-group; page-break-before: avoid;}
tboby { display: table-row-group;page-break-after: avoid;page-break-before: avoid;}
tfoot { display:table-footer-group;}
/* *************** */
#footer {
display: block;
position: fixed;
bottom: 0;
}
#companyName{
margin-top: -10px !important;
}
.panel-body{
margin: -1mm 0mm 10mm 0mm !important;
}
.agreement_title{
margin-top: -15px !important;
}
.margin_top{
margin-top: -6px !important;
}
}
Issue with Firefox causing an extra page before printing despite being okay with no content. Any insights or solutions would be greatly appreciated.