Unable to freeze header

measterbro

I am unable to get the "freeze header" option to work. I have multiple tables on a page and was trying to freeze the header for one of them as a test.

The link is:

http://www.citydynasty.com/Rivalries/Boston-New%20York/Overall.cshtml

The code is:

$(document).ready(function () {
    try {
        var t = $('.table_id4').DataTable({
        });
        t.on('order.dt search.dt', function () {
            t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1;
            });
        }).draw();
        new $.fn.DataTable.FixedColumns(t, {
            leftColumns: 2,
            rightColumns: 0
        });
        new $.fn.dataTable.FixedHeader(t, {
            header: true
        });
    }
    catch(err) {
        return true;
} 
});

The table to be frozen is the fourth one on the page.

For some reason it is putting a copy of the header at the bottom of the page (which can be seen by scrolling all the way down).