<html> <head></head> <body> <style> .AP_CONTNT{width: 1000px;} .AP_HEAD{border: 1px solid;padding: 7px;background: bisque;} .AP_CONTNT1{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;} .AP_CONTNT2{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;} .AP_CONTNT2_B1{border: 1px solid;padding: 0px;background: white;} .AP_CONTNT2_BC1{border: 0px solid grey;padding: 7px;margin-top:5px;} .AP_CONTNT2_BC2{border: 0px solid;padding: 7px;margin-top:5px;} .AP_CONTNT2_BC3{border: 0px solid;padding: 7px;margin-top:5px;} .table1{border: 1px solid; width:100%;border-collapse:collapse;} .table1 tr td{border: 1px solid; } .table1 td{padding: 5px;} .div_btn{padding:5px;} </style> <!---- This script used to print this div content ----> <script> function printContent(el) { var restorepage = document.body.innerHTML; var printcontent = document.getElementById(el).innerHTML; document.body.innerHTML = printcontent; window.print(); document.body.innerHTML = restorepage; } </script> <div align="center"> <div class="AP_CONTNT" > <div class="AP_HEAD">Testing the print</div> </div> <div class="AP_CONTNT" id="AP_CONTNT"> <style> .AP_CONTNT{width: 1000px;} .AP_HEAD{border: 1px solid;padding: 7px;background: bisque;} .AP_CONTNT1{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;} .AP_CONTNT2{border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;} .AP_CONTNT2_B1{border: 1px solid;padding: 0px;background: white;} .AP_CONTNT2_BC1{border: 0px solid grey;padding: 7px;margin-top:5px;} .AP_CONTNT2_BC2{border: 0px solid;padding: 7px;margin-top:5px;} .AP_CONTNT2_BC3{border: 0px solid;padding: 7px;margin-top:5px;} .table1{border: 1px solid; width:100%;border-collapse:collapse;} .table1 tr td{border: 1px solid; } .table1 td{padding: 5px;} .div_btn{padding:5px;} </style> <div class="AP_CONTNT1"> ALL DATA IS HERE</div> <div class="AP_CONTNT2" id="AP_CONTNT2" style="border: 1px solid;padding: 7px;margin-top: 5px;background-color: cadetblue;"> <div class="AP_CONTNT2_B1"> <div class="AP_CONTNT2_BC1"> <table class="table1"> <?php $max_i = 5; for ($i = 0; $i <= $max_i; $i++) { ?> <tr> <td>Here My Content</td> <td>Here My Content Here My Content Here My Content Here My Content</td> </tr> <?php } ?> </table> </div> <div class="AP_CONTNT2_BC2"> <table class="table1"> <?php $max_i = 5; for ($i = 0; $i <= $max_i; $i++) { ?> <tr> <td>The 2nd Data is</td> <td>Here My Content Here My Content Here My Content Here My Content</td> </tr> <?php } ?> </table> </div> <div class="AP_CONTNT2_BC3"></div> </div> </div> </div> <div class="div_btn"><button onclick="printContent('AP_CONTNT')">Print</button></div> </div> </body> </html>
<!-- This script used to print this div content --> <!--here, el= div id --> <script> function printContent(el) { var restorepage = document.body.innerHTML; var printcontent = document.getElementById(el).innerHTML; document.body.innerHTML = printcontent; window.print(); document.body.innerHTML = restorepage; } </script>