打印不工作后增加表格宽度

Question

I know this kind of question has been asked before. But i am stuck and tried everything. I have no clue how to fix this. Heres the issue: the printed table format and display format of the details has less width and the values are not displayed properly. Please help.

View page to be printed

print preview after clicking print button

Here is my what i have done so far:

html file:

      <div class="card-body collapse in">
            <div class="card-block big-font" id="print_content">
            <div class="col-md-5">
            <div class="panel panel-default">
                <div class="panel-heading"  style="padding-bottom:15px;padding-top:15px;"><b>Client</b></div>
                <div class="panel-body">
                    <br>
                <table class="table">
                    <tr>
                        <th>Name</th>
                        <td id="c_name"></td>
                    </tr>
                    <tr>
                        <th>Address</th>
                        <td id="c_add"></td>
                    </tr>
                    <tr>
                        <th>Contact No</th>
                        <td id="c_contact"></td>
                    </tr>
                    <tr>
                        <th>Client GST</th>
                        <td id="c_gst"></td>
                    </tr>
                    <tr>
                        <th>Pending Amount</th>
                        <td id="c_pen"></td>
                    </tr>
                    <br>
                </table>
                </div>
            </div>
            </div>
            <div class="col-md-7">
                <div class="panel panel-default">
                    <div class="panel-heading" style="padding-bottom:15px;padding-top:15px;"><b>Purchase History</b></div>
                        <div class="panel-body">
                        <table class="table" id="p_history" >
                         </table>                         
                    </div>
                </div>
                </div>
                <div class="col-md-12 no-print" style="text-align: center;">
                     <div id="printbtn" name="printbtn">
                     </div>
                </div>
            </div>
        </div>

js

    <script>
$(document).ready(function()    
{
$('#clientnames').change(function(e)
{
    e.preventDefault;
    var client_id = $('#clientnames').val();
    $.ajax({
        method: 'POST',
        url: "<?php echo base_url().'clients/get_client_info'; ?>",
        data: {client_id: client_id},
        success: function(res)   
        {                   
           var parsed = JSON.parse(res);                   
           $("#p_history tr").remove();
            if(parsed.status_code == 1) 
            {
                var dash = '-';
                var i;                        
                $('#client-tab').show();
                $('#c_name').html(parsed.info['client_name']);
                $('#c_add').html(parsed.info['client_address']);
                $('#c_contact').html(parsed.info['client_phone']);
                $('#c_gst').html(parsed.info['client_gst']);

                if(parsed.balance == null || parsed.balance == 0)   
                {$('#c_pen').html('-');}
                else   
                { $('#c_pen').html(parsed.balance); }

                var purchase = parsed.purchase;
                var bills = parsed.bills;
                //console.log(purchase);
                //console.log(bills);
                document.getElementById('printbtn').innerHTML = " ";
                document.getElementById('p_history').innerHTML = " ";
                if(bills.length != null || bills.length != 0)
                {                            
                    $('#p_history').append('<th>Bill No</th><th> SGST</th><th> CGST</th><th>Total</th><th> Pending</th><th>Details</th>');

                    for( var i=0; i< bills.length; i++)   
                    {
                        var prodobj = parsed.purchase[i]; 
                        var billobj = parsed.bills[i]; 
                        var p = null; var hsn = null; var h =null; var w = null;var r =null; var a = null;
                        bid = billobj['bill_id'];
                        var pending = '-'; 
                        if(billobj['bill_pending'] != 0 ){ pending = billobj['bill_pending'] ;}

                        $('#p_history').append('<tr><td>' + billobj['bill_no'] + '<div id="div'+i+'" class="collapse changethis">\
                                <div class="panel-body" float="right" id="print_content">\
                                <table class="table details" style="margin-right: -390px;margin-top:20px;" id="'+bid+'">\
                                <th  class="prodname" colspan="">Product name</th>\
                                <th>HSN Code</th>\
                                <th>Height</th>\
                                <th>Width</th>\
                                <th>Rate</th>\
                                <th>Quantity</th>\
                                <th>Amount</th>\
                                <tr></tr>\
                                </table>\
                                </div> \
                                </div> </td><td>' + billobj['sgst'] + '</td><td>' + billobj['cgst'] + '</td><td>'+billobj['bill_grandtotal'] +'</td><td>'+ pending +'</td><td><a href="#div'+i+'" class="btn btn-info" data-toggle="collapse" vertical-align: middle;>+</a></td></tr>');                    

                         for(var j=0;j<purchase.length; j++)
                        {
                            if(billobj['bill_id'] == purchase[j]['bid'])
                            {
                                var a = '<td id="t">'+purchase[j]['product_name']+'</td><td>'+purchase[j]['hsncode']+'</td><td>'+purchase[j]['hsncode']+'</td><td>'+purchase[j]['height']+'</td><td>'+purchase[j]['width']+'</td><td>'+purchase[j]['width']+'</td><td>'+purchase[j]['rate']+'</td><td>'+purchase[j]['qty']+'</td><td>'+purchase[j]['amt']+'</td>';
                                var mh,mw;
                                var x = purchase[j]['bid'];
                                var m1 = purchase[j]['m1']; 
                                var m2 = purchase[j]['m2']; 
                                if(m1 == 1 && m2==1){ mh="ft";mw="ft"}
                                if(m1 == 2 && m2==2){ mh="inches";mw="inches"}
                                if(m1 == 3 && m2==3){ mh="cm";mw="cm"}
                                if(m1 == 4 && m2==4){ mh="mm";mw="mm"}
                                var table = document.getElementById(x);
                                // Create an empty <tr> element and add it to the 1st position of the table:
                                var row = table.insertRow(1);
                                // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
                                var cell1 = row.insertCell(0);
                                var cell2 = row.insertCell(1);
                                var cell3 = row.insertCell(2);
                                var cell4 = row.insertCell(3);
                                var cell5 = row.insertCell(4);
                                var cell6 = row.insertCell(5);
                                var cell7 = row.insertCell(6);                               
                                // Add some text to the new cells:
                                cell1.innerHTML = purchase[j]['product_name'];
                                cell2.innerHTML = purchase[j]['hsncode'];
                                cell3.innerHTML = purchase[j]['height']+" "+mh;
                                cell4.innerHTML = purchase[j]['width']+" "+mw;
                                cell5.innerHTML = purchase[j]['rate'];
                                cell6.innerHTML = purchase[j]['qty'];
                                cell7.innerHTML = purchase[j]['amt'];
                            }                            
                        }  
                    }

                $('#printbtn').append('<br><button type="button" class="btn btn-info" data-toggle="modal" onClick="print_page()"> <i class="icon-print4" style="color:white;"></i> Print History</button>');                        
                } //bills exist
                if(bills.length == null || bills.length == 0)//if no bills
                {   $('#printbtn').html('<br> No History');  }                            
            } //endif status code is success
       }//end of success 
    });
 })
})
</script>
<script>
function print_page()
{
     var printContents = document.getElementById("print_content").innerHTML;
     var originalContents = document.body.innerHTML;
     document.getElementById("print_content").style.fontSize = "xx-large";
     document.body.innerHTML = printContents;
    //expand collapsible divs
     $('div.changethis').addClass('in').css("height", "");
     window.print();
     document.body.innerHTML = originalContents;
     window.location.href = "<?php echo site_url('clients/search'); ?>";   
}
</script>

print.css

@media print {
.content-body   
{
margin-left: -55%;
margin-top: -7%;
}
  [class*="col-sm-"] {
    /*float: left;*/
  }

  [class*="col-xs-"] {
   /* float: left;*/
  }
.print-col-3
    {
        width:100% !important;
            }

    .text-md-right{
        float:right;
    }
  .col-sm-12, .col-xs-12 {
    width:100% !important;
    float:left !important;
  }

  .col-sm-11, .col-xs-11 {
    width:91.66666667% !important;
  }

  .col-sm-10, .col-xs-10 {
    width:83.33333333% !important;
  }

  .col-sm-9, .col-xs-9 {
    width:75% !important;
  }

  .col-sm-8, .col-xs-8 {
    width:66.66666667% !important;
  }

  .col-sm-7, .col-xs-7 {
    width:58.33333333% !important;
  }

  .col-sm-6, .col-xs-6 {
    width:50% !important;
  }

  .col-sm-5, .col-xs-5 {
    width:41.66666667% !important;
  }

  .col-sm-4, .col-xs-4 {
    width:33.33333333% !important;
  }

  .col-sm-3, .col-xs-3 {
    width:25% !important;
  }

  .col-sm-2, .col-xs-2 {
    width:16.66666667% !important;
  }

  .col-sm-1, .col-xs-1 {
    width:8.33333333% !important;
  }

  .col-sm-1,
  .col-sm-2,
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-xs-1,
  .col-xs-2,
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12 {
  float: left !important;
  }

  body {
    margin: 0;
    padding: 0 !important;
    min-width: 768px;
    font-size: 2em !important;
  }
.prodname{

    }
.details{
      /*margin-left: -590px;  */
    width:80em !important;
    }

.container {
    width: auto;
    min-width: 750px;
  }

a[href]:after {
    content: none;
  }

.print-col-1
{
    float:left;
    width:30%;            
}

 .print-col-2
{
    float:right;
    width:30%;            
}
.noprint,
div.alert,
header,
.group-media,
.btn,
.footer,
.no-print,
#comments,
.nav,
ul.links.list-inline,
ul.action-links {
display:none !important;
}
.billto, .clientname , .clientphone, .date  {
    float:right;
    margin-right:9%;        
}
.billto{
    margin-top:-9%;
}

/*displays all collapsible divs expanded when printing*/
.list {
    display: inline;
}/**----x----*/
table{
    width:auto !important;

    }
}

Answer 1

I'm not sure why you're putting the product details inside the "bill no" TD, A better aproach is to put product details in the next div, This is an example :

<table class="table">
<thead>
    <th>Bill No</th>
    <th>SGST</th>
    <th>CGST</th>
    <th>Total</th>
    <th>Pending</th>
    <th>Details</th>
</thead>
<tbody>
    <tr>
        <td>12357-2018/2019</td>
        <td>38.88</td>
        <td>8.64</td>
        <td>479.52</td>
        <td>-</td>
        <td>+</td>
    </tr>

    <tr style="display: none;" id="productDetails-productId">

        <td colSpan="6">

            You can put here details about product (You can put them in a table)

        </td>

    </tr>

</tbody>
</table>