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 good in the opening page, the page before printing.But Upon clicking print , the page takes wrong allignment ,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 >
            <div id="ui-view" data-select2-id="ui-view">
                <div>
                    <div >
                        <style>
                        </style>

                      <div >
                        <a  href="#" onclick="printthis()" data-abc="true"><i  title="Print Invoice"></i></a>
                      </div> 
                   </div>
                   <div >
                       <div >
                          <div  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 >
                             <div><h6></h6></div>
                                  <div><strong>xfgfggggggggg</strong></div>
                                  <div>tttttttttt</div>
                                  <div>lllllllll</div>
                                  <div>Email: [email protected]</div>
                                  <div>Phone: 222222</div>
                            </div>
                                  

                         </div>
                         <hr >
                        
                          <table >
                             <thead  id="theader">
                                 <tr><th ><h5>Description</h5></th>
                                     <th ><h5>Amount</h5></th></tr>
                             </thead>
                          </table>
                </div>
               </div>
                </div>
            </div>
        </div>
   

CodePudding user response：

Give width:100% for bill-tab.

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