Header width adjust

speti43

I created a datatable, with twenty two columns.
My problems are:

The horizontal scrolling doesn't work, it shrinks the header row, and the header columns slips over the other columns.
I tried innerscrollx =300% etc, but its not a good solution.
Scrolled over the data, and there was empty area on right side.
Now i'm trying with the countainer div's overflow:scroll property,
it works excellent, but when the column data is a one digit integer, the column header shrinks and wraps 2-3 row.
I've tried the white-space: no-wrap, but the header slipped over the next column.

I would like to achieve this:
Adjust Column width the largest data size, even if the header is the largest

Finally i put header row into data, and the result was good, the datatable looks nice, but i don't want to see the header inside data...

Is there any solution?

Thanks,
Peter

Code:
[code]
oTable = $('#dtFuvartorzs').dataTable({
"bProcessing": true,
"bServerSide": true,
"bFilter": false,
"bInfo": false,
"sAjaxSource": "/Handlers/JQueryDtFeeder.ashx?dtTip=0&Szur=0&fuvartorzstipus=1",
"aoColumns": [
22 cols...

],
"oLanguage": {
"sUrl": "/JS/JqueryDatatable/jqueryDataTableHun.txt"
},
"aoColumnDefs": [
{
"aTargets": [16],
"bSearchable": false,
"sType": 'date',
"fnRender": function(oObj) {
var javascriptDate = new Date(parseInt(oObj.aData.date.substr(6)));
return javascriptDate.format("yyyy-MM-dd");
}
}, {
"aTargets": [21],
"bSearchable": false,
"sType": 'date',
"fnRender": function(oObj) {
var javascriptDate = new Date(parseInt(oObj.aData.date2.substr(6)));
return javascriptDate.format("yyyy-MM-dd");
}
}, ],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// Bold the grade for all 'A' grade browsers
if (aData.bz== "Afterv") {
$(nRow).children("td").attr("height", "1px");
}
}
});
[/code]