DataTables

I'm having a problem with the jQuery DataTables plugin. The first time I invoke the $.dataTable() it produces a nice looking table. But the second time I call it (To reinitialize the table), the column widths are not correct, i.e. the table is squished horizontally. In all cases, the same code is called so I do not understand. Furthermore, this does not happen with Firefox, only with Internet Explorer, although Explorer is my target browser.

My javascript (inside the success handler for an ajax call):

success: function (result) {
if (oApplicationsTable != undefined) {
oApplicationsTable.fnDestroy();
oApplicationsTable = null;
}
$(this).html(result.d);
oApplicationsTable = $("#applicationsTable").dataTable({
"bDestroy": true,
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bLengthChange": false,
"aLengthMenu": [[10, 20, -1], [10, 20, "All"]],
"iDisplayLength": 10,
"sDom": '<"H"ilfr><"applicationsList"t><"F"p>',
"aoColumns": [
/* checkbox */{"bSortable": false, "bSearchable": false, "bVisible": true },
/* Name */{"bSearchable": false, "bVisible": true },
/* LongName */{"bSearchable": true, "bVisible": false },
/* Location */{ },
/* Category */{ },
/* Description */{"bSearchable": false, "bVisible": true },
/* LongDescription */{"bSearchable": true, "bVisible": false }
],
"aaSorting": [[2, "asc"]],
});

My markup looks like this:

<%--EDIT REPORT GROUPS DIALOG--%>
<div id="editReportGroupsDialog" title="Edit report groups" style="overflow: hidden;">
<div class="ui-helper-clearfix">
<select id="selectedReportGroup" class="tb-select" style="min-width: 150px;"></select>
<a href="#" id="saveAsButton" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Save as..."><span class="ui-icon ui-icon-disk"></span>&nbsp;</a>
<a href="#" id="deleteButton" class="fg-button ui-state-default fg-button-icon-solo ui-corner-all" title="Delete..."><span class="ui-icon ui-icon-trash"></span>&nbsp;</a>
</div>
<div style="margin-top: 5px; width: 100% !Important;">
<table id="applicationsTable" class="ui-widget" style="width: 100% !Important; border-collapse: collapse; font-size: 70%;">
<thead class="ui-widget-header" style="width: 100% !Important;">
<tr class="ui-widget-header">
<th class="cb-header ui-widget-header"><input type="checkbox" /></th>
<th class="ui-widget-header">Name</th>
<th class="ui-widget-header">LongName</th>
<th class="ui-widget-header">Location</th>
<th class="ui-widget-header">Category</th>
<th class="ui-widget-header">Description</th>
<th class="ui-widget-header">LongDescription</th>
</tr>
</thead>
<tbody id="applicationsTableBody" style="width: 100% !Important;">
</tbody>
</table>
</div>
</div>

I have spent an aweful lot of time reading other similar posts, but have not found the answer. Thanks for reading.

Robert