Column Headers and fnAdjustColumnSizing()

lagout

I'm currently using datatables quite successfully however, when a table resizes the column header likes to wrap over multiple lines which makes things look a bit messy. I've taken advice and set the column header's css to eliminate the wordwrap css setting to prevent this happing, keeping everything on the same line but now I'm faced with a new problem. The fnAdjustColumnSizing() function likes to set the width of a column to the longest whole word (which now happens to be the full name) instead of the set width in the table, thus the width of all the columns exceeds the table width when the page width is reduced past a certain length.

Lets say I have the following Datatables set up:

oTable = $('#table').dataTable({
    "autoWidth": false,
    "dom": '<"seltarch"><"top"r>t<"bottom"ifp><"clear">',
    "iDisplayLength": 20,

    //// loading icon
    "oLanguage": {
        "sProcessing": "<img id=\u0022table_processing_img\u0022 src=\u0022" + $.liveAudit.url.resources + "ajax-loader.gif\u0022>  Loading"
    },
    "bProcessing": true,

    "bServerSide": true,
    "bFilter": false,
    "sAjaxSource": $.liveAudit.url.json + "AjaxHandlerAudit_Index",
    "fnInitComplete": function() {
        //this.fnAdjustColumnSizing();
    },
    "bSort" : false,
    "bDeferRender": true,
    "aoColumns": [
        { "sTitle": "<div class=\"table-column-header\">abcdefghij    abcdefghi</div>",  "bSortable": false, "sWidth": "10%" },
        { "sTitle": "<div class=\"table-column-header\">abcdefghij    abcdefghi</div>", "bSortable": false, "sWidth": "10%" },
        { "sTitle": "<div class=\"table-column-header\">abcdefghij    abcdefghi</div> ", "bSortable": false, "sWidth": "24%" },
        { "sTitle": "<div class=\"table-column-header\">abcdefghij    abcdefghi</div>", "bSortable": false, "sWidth": "10%" },
        { "sTitle": "<div class=\"table-column-header\">abcdefghij    abcdefghi</div> ", "bSortable": false, "sWidth": "10%" },
        { "sTitle": "<div class=\"table-column-header\">abcdefghij    abcdefghi</div> ", "bSortable": false, "sWidth": "10%" }
    ]
});

and the following resize function:

var rtime = new Date(1, 1, 2000, 12, 00, 00);
var timeout = false;
var delta = 200;

$(window).on('resize', function () {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        oTable.fnAdjustColumnSizing();     
    }
}

the css for table-colun-header is:

.table-column-header{
    white-space:nowrap;
    overflow:hidden;
}

Are there any settings I'm missing so that resize fuction resizes to the column set width and not the title width?