Datatable columns headers are not aligned with their content

Question

My datatable columns header is not aligned with their content:

Here is how it looks like:

Here is a datatable code:

$("#myTable").dataTable(
            {
                 "sDom": 't<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"i>',
                //sDom:             
                //'l' - Length changing
                //'f' - Filtering input
                //'t' - The table!
                //'i' - Information
                //'p' - Pagination
                //'r' - pRocessing
                 "bAutoWidth": false,
                 "aoColumns": [
                    { "sSortDataType": "dom-checkbox" }, //checkbox
                    { "sType": "string", "bSortable": true }, //CreatedDate 
                    { "sType": "string", "bSortable": true }, //CreatedBy 
                    { "sType": "string", "bSortable": true }, //Category 
                     { "sType": "string", "bSortable": false }, //Note   
                     { "sType": "string", "bSortable": true}, //Application
                    { "sType": "string", "bSortable": false } //Update Button
                 ],
                "sScrollY": "180px",
                "bPaginate": false,
                "bFilter": false,
                "aaSorting": [],
                "bAutoWidth": false,
                "bInfo": true,
                "bJQueryUI": true
            });

What am I missing?

Answer 1

I have found a solution for my case. I've been searching online but couldn't find a solution that would help in my case, so I played with a css and found what fixed my problem

My table has an id #myTable.

So, I just needed to set the particular columns' left padding:

#myTable td:nth-child(6){
     padding-left:50px;
}

#myTable td:nth-child(7){
     padding-left:50px;
}

And it fixed the problem: