Datatables css not applied on loan within ajax popupcontrol

pczd

I'm using a datatables within an AJAX popupcontrol extender which is activated by hovering over a button. On initial display the CSS isn't applied to the table body and the header is garbled (10 columns). After clicking any button within the popup everything looks fine. The popup is activated on mouseover dynamically by calling ShowCompanyList function. Any help would be greatly appreciated.

[code]
var oTableComp;
var spPageParent;

function ShowCompanyList() {
$find('showPopup').showPopup();
oTableComp.fnAdjustColumnSizing();
}



function LoadCompList(letter)
{
$(document).ready(
function()
{
var svcDescID;
if (spPageParent == 'gfe')
{
svcDescID = $("[id*='ddlSPFeeDesc'] :selected").val();
}
else
{
if ($("[id*= 'hidRowType']").val() == "Empty")
{
svcDescID = $("[id*='ddlServiceDescriptionET'] :selected").val();
}
else
{
svcDescID = $("[id*='ddlServiceDescriptionFT'] :selected").val();
}
}

oTableComp = $('#compList2').dataTable(
{
"bProcessing": true
, "bAutoWidth": false
, "bjQueryui": false
, "bServerSide": true
, "bPaginate": false
, "sScrollY": "200px"
, "bScrollCollapse": true
, "bDestroy": true
, "sAjaxSource": "../handlers/SearchServiceProvider.ashx"
, "sServerMethod": "POST"
, "fnServerParams": function(aoData)
{
aoData.push({ "name": "SvcDescID", "value": svcDescID }, { "name": "LetterClick", "value": letter });
}
, "fnRowCallback": function(nRow, aData, iDisplayIndex) {
if (spPageParent == 'gfe') {
$('td:eq(9)', nRow).html('' + aData.Contact.Name + '');
}
else {
$('td:eq(9)', nRow).html('' + aData.Contact.Name + '');
}
}
, "aoColumns": [
{ "mData": "ID", "bSortable": false, "sWidth": "5%", "sClass": "right" },
{ "mData": null, "bSortable": false, "sWidth": "1%" },
{ "mData": "Company.Name", "bSortable": false, "sWidth": "20%" },
{ "mData": "Branch.Name", "bSortable": false, "sWidth": "10%" },
{ "mData": "Address.Address1", "bSortable": false, "sWidth": "13%" },
{ "mData": "Address.City", "bSortable": false, "sWidth": "10%" },
{ "mData": "Address.State", "bSortable": false, "sWidth": "7%" },
{ "mData": "Address.Zip", "bSortable": false, "sWidth": "6%" },
{ "mData": "Phone", "bSortable": false, "sWidth": "11%" },
{ "mData": "Contact.Name", "bSortable": false, "sWidth": "17%" }
]
});
});
[/code]