Columns Header + ColVis + Boostrap (with Test Case) Issue

superfox

I coudn't solve this problem so I repropose it.

A test case of this problem is available here
http://tinyurl.com/bwbceb2

Column headers are misaligned and any kind of interaction (resizing browser, ordering, ecc..) make them totally messed up.

DataTable reports a warning I did what the message says (as Allan suggested) but it wasn't useful.

The example uses a bit of bootstrap, could it be the cause?
Table content is loaded by ajax.

How can I solve this problem?
The test case code is readable so I hope someone can help me.

For convenience I post here the snippet code about the table inizialitation :

[code]
doTable();
$('#t1').dataTable({
"sAjaxSource": "array.txt",
"bDeferRender": true,
"sDom": 'C<"clear">lfrtip',
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true});
[/code]

and here is the code about the table creation:
[code]
function doTable()
{
var table=document.createElement("table"),
tBody=document.createElement("tbody"),
tHead=document.createElement("thead"),
tHeadRow=document.createElement("tr"),
tCol,
vCol=[
'HEADER COL 1',
'HEADER COL 2',
'HEADER COL 3',
'HEADER COL 4',
'HEADER COL 5',
'HEADER COL 6',
'HEADER COL 7',
'HEADER COL 8',
'HEADER COL 9',
'HEADER COL 10',
'HEADER COL 11',
'HEADER COL 12',
'HEADER COL 13',
'HEADER COL 14',
'HEADER COL 15',
'HEADER COL 16',
'HEADER COL 17',
'HEADER COL 18',
'HEADER COL 19'];

for (var i=0, l=vCol.length; i < l; i++)
{
tCol=document.createElement("th");
tCol.innerHTML=vCol[i];
tHeadRow.appendChild(tCol);
}
tHead.appendChild(tHeadRow);
table.appendChild(tHead);
table.appendChild(document.createElement("tbody"));

table.id='t1';
document.getElementById('container').appendChild(table);
return table;
}
[/code]

thanks in advance!

allan

Try removing sScrollXInner as the warning message says.

Allan

superfox

thanks Allan for your quick answer, I tried but unfortunately the problem persists!

the code I posted is correct?