Footer in a hidden div

bvnbhati

I am using jQuery-datatables (version 1.9) in a hidden div. It renders fine as long as I don't have a footer, but when I add a footer it is not displayed with proper widths.
When I check width in HTML via firebug, I find all columns set to width 0.

I have already used fnAdjustColumnSizing on the table, but still same issue.

Here is my HTML table

    <div id="Report" style="display: none">
        <table id="rpt" class="display">
            <thead>
            <tr style="background-color:#B9C9FE;color:#0033BB;">
            <th>Col1</th>
            <th>Col2</th>
            ...
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr style="background-color:#B9C9FE;color:#0033BB;">
            <th>Col1</th>
            <th>Col2</th>
            ...
            </tr>
        </tfoot>
        </table>       
        <br/>
    </div>

Here is the datatable

    var rptTable = $( "#rpt" ).dataTable({
        "bProcessing" : true,
        "bDestroy": true, 
        "bJQueryUI": true,
        "oTableTools": {
            "sSwfPath" : "/js/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": ["csv"]                                    
        },
        "sDom": '<"H"fp><tr><"F">T',                
        "aoColumns": [
                { "sWidth": "60px" },                                        
                { "sWidth": "100px" },                                        
                {    "sWidth": "65px" },                                  
                { "sClass": "right","sWidth": "65px"},      
                { "sClass": "right","sWidth": "65px"},       
                { "sClass": "right","sWidth": "65px" },     
                { "sClass": "right","sWidth": "65px" },    
                { "sClass": "right","sWidth": "65px"},       
                { "sClass": "right","sWidth": "65px"},       
                { "sClass": "right","sWidth": "65px"},     
                { "sClass": "right","sWidth": "65px" },       
                { "sWidth": "25px" }                                
    
        ],
        "bAutoWidth": false,   
        "sScrollX": "100%",
        "bSort": true,
        "bPaginate": true,
        "iDeferLoading": 0,
        "iDisplayLength": 25 
    });

And here is the part of AJAX call that handles table data

    success: function(returnData){
        var json = $.parseJSON(returnData); 
        rptTable.fnClearTable();
        if(json){
            if(json.Result === 'OK') {
                if(json.Records.length > 0){
                    rptTable.fnAddData(json.Records);
                    rptTable.fnAdjustColumnSizing(false);
                    $( "#Report" ).show();
                }                                
            }
            ...
        }
        ...
    }

Here is the footer HTML as shown in firebug. 

    <div class="dataTables_scrollFootInner" style="width: 100px; padding-right: 0px;">
    <table class="display dataTable" style="margin-left: 0px; width: 100px;">
    <tfoot>
    <tr style="background-color:#B9C9FE;color:#0033BB;">
    <th class="ui-state-default" rowspan="1" colspan="1" style="width: 0px;">Col1</th>
    <th class="ui-state-default" rowspan="1" colspan="1" style="width: 0px;">Col2</th>
    ...
    </tr>
    </tfoot>
    </table>
    </div>

I am on a secure website so can not direct to the webpage. Please help.