Home » Javascript » Why is my data column fixed-width when I'm using a responsive bootstrap class?

Why is my data column fixed-width when I'm using a responsive bootstrap class?

Posted by: admin November 1, 2017 Leave a comment

Questions:

I an using data table with bootstrap . When I fetch data using a server-side method, it’s being responsive, but the column is still fixed width, and for that reason, the scroll bar is visible under the table.

My HTML:

<div class="row">
    <div class="col-md-12 col-sm-12">
        <div class="card-box table-responsive">      
            <h4 class="header-title m-t-0 m-b-30">All Medicine </h4>
            <table id="datatable" class="table table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Price</th>
                        <th>Expire date</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div><!-- end col -->
</div>
<!-- end row -->

JS code

<script>

    $(document).ready(function() {
    $('#datatable').dataTable(
        {
        "responsive": true,
        "language": {
          "emptyTable": "<h2 style='text-align:center;color:#ff5b5b;'>No online users found!!!</h2>",
          "zeroRecords":    "<h2 style='text-align:center;color:#ff5b5b;'>No matching records found</h2>"

            },

            "bProcessing": true,
             "sAjaxSource": "class/medicine_record.php",
              "bPaginate":true,
              "sPaginationType":"full_numbers",
              "iDisplayLength": 10,
             "aoColumns": [
                { mData: 'medicine' },
                { mData: 'medicine_form' },
                { mData: 'medicine_price' },
                { mData: 'medicine_expire_date' },
                { mData: 'link' },
        ]
        } 
    );
} );

</script>

Image:

enter image description here

Answers: