Headers do not align when using default scrolling.

Hi,

Edit: See possible solution below.

Im having a strange problem with the alignment of headers that i cannot reproduce on jsbin. See link below, all works fine.

My default record length is 10 records. I styled the datatable with default bootstrap 3 styling (github plugin repo). I added a few extra stuff of my own but i dont think that's important.

Look at the following screenshot: https://dl.dropboxusercontent.com/s/fv1zqbahfux4x36/Bad_datatable_003.png
I marked it with red circles in the header to show the problem. Since i have only 10 records the dataTable collapses and no scrollbar is shown. (that part is good). When i use the pagination to go to the next page the alignment is correct! Very strange...

Look at the next screenshot: https://dl.dropboxusercontent.com/s/uk9i8ukiqvizpkj/Good_datatable_004.png
When i change the record length to 25 records, the alignment is correct.

I have really hit a dead end here and i'm asking for help. I'm guessing it's some kind of CSS issue which screws with the column calculation but i can't figure it out. Any help is welcome!

Testdata:

http://live.datatables.net/arodaw/4
http://debug.datatables.net/axekuy

Edit:
I also read the following thread: http://datatables.net/forums/discussion/16140/columns-wrong-alignment-table-header-and-data-improper-alignment
This is what i'm getting. However setting border-collapse: seperate; on the table did not work

Edit2:
I maybe found a workaround... Since im using ajax to get my data:

"fnInitComplete": function() {
        oTable.fnAdjustColumnSizing();
},

However i'm not sure what the performance impact of this is. Is this a correct solution Allan?