Fixed header is not working on dynamic with multiple tables
<p>I have a html table and on click of a row another table dynamically will get populated and that should have the fixed header and by default first row of the parent table will selected and the child table column header will automatically resized and it working fine, when click on any row in the parent table the fixed header is working.</p>

<pre><code>$(document).on('click', '#hrztable tbody tr', function (event) {
var table = $('#sortTable').DataTable();
    table.destroy();

    $("#sortTable").dataTable({
        "sScrollY": "100px",
        "bScrollCollapse": true,
        "bFilter": false,
        "bAutoWidth": false
    });

    width = $(window).width();
    height = $(window).height();

    $(window).trigger('resize');
});

var resizeTimer;

$(window).on('resize', function (e) {
    //debugger;
    alert('test');
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        var sortTable = $('#sortTable').dataTable();
        sortTable.fnAdjustColumnSizing(false);

    }, 1000);

});
</code></pre>