header misalignment

i'm using datatables for a long time but have one table that fields mismatch

attached my calling to the table:

summaryTablesCust = $('#listSpecTable').dataTable({
"iDisplayLength": 60, // number of items in table page
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bStateSave": true,
"bScrollInfinite": true,
"sScrollY": "450px",
"bScrollCollapse": true
});
and here is my table:

<table id="listSpecTable" class="zebra">
<thead>
<tr>
<th>customerID</th><th>customerName</th><th>customerRegDate</th><th>customerNumEvents</th><th>customerNumEvades</th><th>customerNumCancel</th><th>customerNumParticipated</th><th>phone2</th><th>xPhone2</th><th>xPhone3</th><th>xPhone4</th><th>xPhone5</th><th>hisName</th><th>hisRealName</th><th>hisAge</th><th>herName</th><th>herRealName</th><th>herAge</th> </tr>
</thead>
<tbody>
<tr><td>10223</td><td>xxxx</td><td>27/09/2008</td><td>3</td><td>0</td><td>0</td><td>0</td><td></td><td>0523464656</td><td></td><td></td><td></td><td>xxx</td><td></td><td>42</td><td>xxxx</td><td></td><td>39</td></tr> </tbody>
</table>
what makes the things even more wird is that when i click one of the column headers that suddenly comes fixed. any help?