Thead and Tbody be divided into two table and don't match in width

The Jquery code and result html is as following. Could anybody help me?

objectStateAdminDataTable = $('#qualityTabTable').dataTable(
{
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bAutoWidth" : true,
// "bDestroy" : true,
"sScrollX" : "100%",
"sScrollXInner" : "120%",
"aoColumns" : [

null, // Carrier
null,
null, null, null, null, null, null, null, null,null //CC:Single Line


],
"iDisplayLength" : 5, //CC:Single Line
"aLengthMenu" : [ [ 5, 10, 25, 50, -1 ],
[ 5, 10, 25, 50, "All" ] ], // Show entries

//"aaSortingFixed" : [ [ 0, 'asc' ] ], // Carrier ID column is fixed sorting
"aaSorting" : [ [ 0, 'asc' ] ]
// TODO this column does not exist so probably is not doing/affecting

});

<div id="qualityTabTable_wrapper" class="dataTables_wrapper" role="grid">

<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px; width: 100%;">
<div class="dataTables_scrollHeadInner" style="width: 120px;">
<table cellpadding="0" cellspacing="0" style="width: 120px; margin-left: 0px;" class="dataTable">
<thead>
<tr role="row">
<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="qualityTabTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Carrier ID: activate to sort column descending" style="width: 0px;"><div class="DataTables_sort_wrapper">Carrier ID<span class="DataTables_sort_icon css_right ui-icon ui-icon-triangle-1-n"></span></div></th><th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="qualityTabTable" rowspan="1" colspan="1" aria-label="Plan ID: activate to sort column ascending" style="width: 0px;">
<div class="DataTables_sort_wrapper">Plan ID<span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span></div>
</th>
...
</tr>
</thead>
</table>
</div>
</div>
<div class="dataTables_scrollBody" style="overflow: auto; width: 100%;">
<table id="qualityTabTable" cellpadding="0" cellspacing="0" style="width: 120%; margin-left: 0px;" class="dataTable" aria-describedby="qualityTabTable_info">
<thead>
<tr role="row" style="height: 0px;">
<th class="ui-state-default" role="columnheader" tabindex="0" aria-controls="qualityTabTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Carrier ID: activate to sort column descending" style="padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px; width: 0px;">
</th>
...
</tr>
</thead>


<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="odd">
<td class=" sorting_1">ApexHealth</td>
<td class=" ">Apex_Bronze_3500_TC</td>
<td class=" ">Not Available</td>
<td class=" ">Not Available</td>
<td class=" ">Not Available</td>
<td class=" ">Not Available</td>
<td class=" ">Apex Bronze 3500</td>
<td class=" ">PPO</td><td class=" ">1</td>
<td class=" ">2</td><td class=" ">4.99</td>
</tr>
</tbody>
</table>
</div>
</div>