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>
Advertisement
Answer
Give width:100% for bill-tab.
.bill-tab {
overflow-x: auto;
border-spacing: 2px;
border: 1px solid #dee2e6;
max-width: 100%;
width: 100%;
}