When creating a table, the horizontal scroll bar is before the tfoot.

I am dynamically creating a table (except the table itself) as the columns are dynamic.

After creating the table, if I view the raw HTML, the structure is fine (THEAD, TBODY, TFOOT).

I am using datatables 1.10.12, and have fixedcolumns.

        if (pTable == 'tblTaskWbsBudgetSumm') {
            $('#tblTaskWbsBudgetSumm').dataTable({
                  "autoWidth":false
                , "fixedColumns": {leftColumns: 2 }
                , "footer": true
                , "info":false
                , "JQueryUI":true
                , "Order":[0,'asc']
                , "ordering":true
                , "paging":false
                , "scrollY":"580px"
                , "scrollX":"1800px"
                , "scrollCollapse":true
                , "footerCallback": function ( row, data, start, end, display ) {
                                var api = this.api(), data,total;

                                api.columns('.sum', {
                                }).every(function() {
                                    var locSum = this
                                        .data()
                                        .reduce(function(a, b) {
                                            var x = 0;
                                            var y = 0;
                                            if (a != null && a > '') {
                                                a = fncReplaceAll(a.toString(),',','');
                                                if (isNaN(a) == false) {x = parseFloat(a);}
                                            }
                                            if (b != null && b > '') {
                                                b = fncReplaceAll(b.toString(),',','');
                                                if (isNaN(b) == false) {y = parseFloat(b);}
                                            }
                                            return x + y;
                                        }, 0);
                                    $(this.footer()).html(fncFormatNumber(locSum,2,"Y","Y"));
                                });
                        }
            });
        }

Has anyone got any ideas what I need to change to get the horizontal scrollbar to be below the tfoot?

Thanks.