Serverside Datatables ScrollX issues and column width issues

I have recently found serverside datatables and have implemented it to my page. However when I enabled scrollx, my table width was shrunk to 3/4 of its full size. Also, duplicate empty headers would appear under my current headers and I am unsure of what I can do to remove them. I hope someone can take a look at my configuration and see if something can be improved. Thank you so much.

<script type="text/javascript">

var table;

$(document).ready(function() {

    //datatables
    table = $('#table').DataTable({ 
        "scrollX": true,
        "processing": true, //Feature control the processing indicator.
        "language": {
            "processing": '<div class="loading"><div class="content">\n\
                <img src="<?php echo base_url().'assets/images/loading/loading.gif'; ?>"/>\n\
            </div></div>'
        },
        "serverSide": true, //Feature control DataTables' server-side processing mode.
        "order": [], //Initial no order.
        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo site_url('CTRL/ajax')?>",
            "type": "POST",
            "data": function(d){
                d.agent_code = "agent1";
            }
        },

        //Set column definition initialisation properties.
        "columnDefs": [
        { 
            "targets": [ 0 ], //first column / numbering column
            "orderable": false, //set not orderable
        },
        ]
    });
});

</script>