Here is my code it's working well in chrome browser when print but in firefox it's not supporting css so many items hide from print area
function printDiv(divName) {
var divElements = document.getElementById(divName).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body> <div style='width: 21cm; margin:0 auto;'>" +
divElements + "</div></body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
.print-button {
width: 120px;
height: 30px;
background: #1abc9c;
color: #FFFFFF;
border-radius: 5px;
border: none;
cursor: pointer;
float: right;
}
.print-header, .print-footer {
display: none;
}
@media print {
/* All your print styles go here */
.print-header, .print-footer {
display: inherit;
}
.print-footer {
float: left;
width: 100%;
padding-top: 20%;
}
.pfooter {
float: right;
/* padding-top: 6%; */
border-top: 1px solid black;
}
.print-middle {
float: left;
width: 100%;
}
.ptable-header {
float: left;
padding-top: 4%;
width: 100%;
}
.printHead {
text-align: center;
margin: 0 auto;
}
.psection {
width: 25%;
float: left;
}
.print-logo {
float: left;
width: 80px;
}
.print-logo img {
width: 78px;
}
.report-date {
float: right;
}
.psub {
width: 40%;
}
.punit {
width: 11%;
}
.pdes {
width: 21%;
}
.pyear {
width: 11%;
}
.ptotal {
width: 12%;
}
}
<div id="list_table">
<h2>Total project found: 2 <input class="print-button" type="button" onclick="printDiv('printableArea')" value="Print"> </h2>
<div id="printableArea">
<div class="print-header">
<div class="printHead">
<h2 class="ptitle">
দুর্যোগ ব্যাবস্থাপনা ও ত্রান মন্ত্রনালয়
</h2>
<h3>
কাজের বিনিময়ে খাদ্য প্রকল্প
</h3>
</div>
<div class="print-middle">
<div class="print-logo">
<img src="http://192.185.183.190/~ssnp/spmis/images/logo.png">
</div>
<div class="report-date">
প্রতিবেদনের তারিখঃ (২০১৬-০১-০৫)
</div>
</div>
<div class="ptable-header">
<div class="psection">
<span>বিভাগঃ</span>
বরিশাল </div>
<div class="psection">
<span>জেলাঃ</span>
ভোলা </div>
<div class="psection">
<span>উপজেলাঃ</span>
মনপুরা </div>
<div class="psection">
<span>ইউনিয়নঃ</span>
সাকুচিয়া
</div>
</div>
</div>
<table>
<thead>
<tr><th>ক্রমিক নং</th>
<th class="psub">প্রকল্পের ধরন</th>
<th class="punit">সংখ্যা</th>
<th class="punit">একক</th>
<!--<th>দৈর্ঘ্য</th>
<th>প্রস্থ</th>
<th>উচ্চতা/গভীরতা </th>
<th>ক্ষেত্রফল</th>
<th>অন্যান্য</th> -->
<th class="ptotal">বরাদ্দের পরিমাণ</th>
<th class="ptotal">ব্যয়ের পরিমাণ</th>
<th class="pyear">অগ্রগতীর হার %</th>
</tr></thead>
<tbody><tr>
<td>1</td>
<td class="pdes">
রাস্তা নির্মাণ </td>
<td class="psub">1</td>
<td class="punit">55555</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
<td class="ptotal">25.00</td>
<td class="ptotal">25.00</td>
<td class="pyear"> 100
</td>
</tr>
<tr>
<td>2</td>
<td class="pdes">
রাস্তা পুনর্নিমাণ </td>
<td class="psub">16</td>
<td class="punit">55555</td>
<!--<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
<td class="ptotal">292.00</td>
<td class="ptotal">292.00</td>
<td class="pyear"> 100
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>মোটঃ 317</td>
<td>মোটঃ 317</td>
<td></td>
</tr>
</tbody></table>
<div class="print-footer">
<div class="footer-amount">
<!-- <h3>
মোট বরাদ্দের পরিমাণঃ
</h3>
<h3>
মোট ব্যয়ের পরিমাণঃ
<h3> -->
</div>
<div class="pfooter">
অনুমোদনকারীর স্বাক্ষর, সীল ও তারিখ
</div>
</div>
</div>
</div>
You have to use !important with @media print. Hope will work for you.
