Data-table Column Fixed When fetching data using server side

sarwardnj

I an using data table with bootstrap . When i am fetching data using Server side method Its being responsive but column is still fixed width and for that reason scroll bar being visible under the table.

my code 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: