html - Bootstrap nesting, shows on page but not on print -

i cant seem right, made divider through css divs , shows on page when in print lines made doesnt show..what other options should do? im running out of ideas, doing wrong how can achieve this

here want ot achieve

heres css

heres print preview

page code:

<div id="page-wrapper">   <div class="row">     <div class="col-md-12">       <div class="panel-body">         <p style="text-align:center;"><b>property acknowledgement receipt</b></p>         <p style="text-align:right;">control no.</p>         <div class="row">           <div class="col-md-16">             <table class="table table-hover table-striped table-bordered table-condensed" class="">               <thead>                 <tr>                   <th style="text-align:center;">quantity</th>                   <th style="text-align:center;">unit</th>                   <th style="text-align:center;">description</th>                   <th style="text-align:center;">unit value</th>                   <th style="text-align:center;">property no.</th>                 </tr>               </thead>               <tbody>                 <tr>                   <td>12</td>                   <td>bucket</td>                   <td style="font-size:12px;">oremloremloremloremloremloremloremloremloremlorem</td>                   <td>2</td>                   <td>1</td>                 </tr>               </tbody>             </table>           </div>         </div>       </div>       <hr style="background-color:black;"> note:       <div style="height:2px;width:100%;background-color:black;"></div>       <div style="width:2px;height:100px;background-color:black;margin:0px auto;"></div>     </div>   </div> </div>  

$(document).ready(function() {   $('#datatables-example').datatable({     responsive: true   }); });