Why a div overlays above other?

I’ve kept a Javascript function printthis() for printing purpose that prints everything in the div id printthis except what is given with the class d-print-none. The code works fine in the opening page, the page before printing.

But upon clicking print, the page takes wrong alignment, means the table head appears in between 2 address divs like in the below link, I wanted the table head to appear after the address blocks like it appears in the page before printing.

How can I fix this? Can I get some help?

https://jsfiddle.net/vwsmf50e/

The full script & css is availble in the above link.

<div id="printthis">
        <div class="container-fluid">
            <div id="ui-view" data-select2-id="ui-view">
                <div>
                    <div class="card">
                        <style>
                        </style>

                      <div class="card-header">
                        <a class="float-right mr-1 d-print-none" href="#" onclick="printthis()" data-abc="true"><i class="fa fa-print fa-fw" title="Print Invoice"></i></a>
                      </div> 
                   </div>
                   <div class="card-body">
                       <div class="row mb-4">
                          <div class="col-sm-8 address2" style="margin-bottom: 0rem!important;">
                              <div><img width='40px' height='40px' src=''> <strong>yyy</strong>      
                                     <div>  kbjk</div>
                                     <div>Email: ui</div>
                                     <div>Phone: 45546</div>
                             </div>
                           </div>
                           <div class="col-sm-4 ml-auto address">
                             <div><h6></h6></div>
                                  <div><strong>xfgfggggggggg</strong></div>
                                  <div>tttttttttt</div>
                                  <div>lllllllll</div>
                                  <div>Email: ac@r.com</div>
                                  <div>Phone: 222222</div>
                            </div>
                                  

                         </div>
                         <hr class="d-print-none addrow">
                        
                          <table class="table text-centered table-bordered bill-tab">
                             <thead class="table-header h" id="theader">
                                 <tr><th class="lefttable-des"><h5>Description</h5></th>
                                     <th class="table-des"><h5>Amount</h5></th></tr>
                             </thead>
                          </table>
                </div>
               </div>
                </div>
            </div>
        </div>

Answer

Give width:100% for bill-tab.

.bill-tab {
                  overflow-x: auto;
                  border-spacing: 2px;
                  border: 1px solid #dee2e6;
                  max-width: 100%;
                  width: 100%;
           }

Advertisement

Answer