this javascript code printing table:
function printelem(divid) { var restorepage = document.body.innerhtml; var printcontent = document.getelementbyid(divid).innerhtml; document.body.innerhtml = printcontent; window.print(); document.body.innerhtml = restorepage; } this css printing table:
<style type="text/css" media="print"> @page { size: auto; margin: 0; } a[href]:after { content: none !important; } html { background-color: #ffffff; margin: 0; } body { margin: 5mm 15mm 20mm 15mm; } </style> when print table half td's not printing.
this table want print:
<div class="table-responsive" id="mydiv"> <span id="hide" hidden>2</span> <table class="table" border=""> <tbody> <tr> <td><b>s.no.</b></td> <td><b>order number</b></td> <td><b>doctor name</b></td> <td><b>medicine availability</b></td> <td><b>action</b></td> </tr> <tr align="center"> <td>1</td> <td><a href="#">06.03-vns742</a></td> <td></td> <td> <div class="table-responsive"> <input type="text" name="id[]" value="298" hidden=""/> <input type="submit" id="submit-form" class="hidden"/> <a href="#"><input type="submit" value="update" hidden=""/></a> <input type="text" name="id[]" value="300" hidden=""/> <input type="submit" id="submit-form" class="hidden"/> <a href="#"><input type="submit" value="update" hidden=""></a> <table class="table" border=""> <tbody> <tr> <td><b>s.no.</b></td> <td><b>medicine name</b></td> <td><b>quantity</b></td> <td><b>unit</b></td> <td><b>availability</b></td> <td><b>remark</b></td> <form action="processavailability.php" method="post"></form> </tr> <tr align="center"> <td>1</td> <td><input type="text" name="medicine_name[]" value="apml"/></td> <!-- <td>apml</td> --> <td><input type="text" name="quantity[]" value="15"/></td> <td> <select name="med_unit_type[]" onchange="checkcolors(this.value);"> <option>tablet</option> <option>strips</option> <option>bottle</option> <option>tablet</option> <option>other</option> </select> </td> <td> <input type="text" name="order_number" value="06.03-vns742" hidden=""/> <select name="availability[]"> <option value="not available">not available</option> <option value="available">available</option> <option value="not available">not available</option> <option value="partially available">partially available</option> <option value="confusion">confusion</option> </select> </td> <td><input type="text" class="css-input" name="remark[]" value="" placeholder="write remark here"/></td> </tr> </tbody> </table> </div> </td> <td> <label for="submit-form">save</label> </td> <td><a href="#">reschedule order</a></td> </tr> </tbody> </table> </div>
i created fiddle can explore problem.
when resize html section, see columns without problems. can provide screenshot of happening?
you can try this.
.table-responsive { width:"100%"; } 