Misaligned columns in fixed header table inside modal popup

Link to test case: Intranet app
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I display a data table inside a modal popup. I wanted to add fixed header so that header wouldn't scroll out of view. I added, among other things:

scrollCollapse: true,
autoWidth: true,
select: true,
fixedHeader: {
    header: true,
    footer: true
 },
 scrollY: '80vh',

When modal pop up appears, column are all squished to the left and I have to select number of records per page or sort by a column to have it display properly.

I tried this when populating data table, didn't work; added it to modal popup's 'show' method; no luck:

tblMissingDetail.order([0, "asc"]).draw();
tblMissingDetail.rows().invalidate();
tblMissingDetail.columns.adjust();


$('#detailNotFoundModal').on('show.bs.modal', function (event) {debugger
    tblMissingDetail.order([0, "asc"]).draw();
    tblMissingDetail.rows().invalidate();
    tblMissingDetail.columns.adjust();
});

This is the event that shows the modal popup:

$(document).on("click", "#lblNotFoundCount", function (event) {
    var value = $(this).attr("data-count");

    if (value != null && value != undefined && value != '') {
        tblMissingDetail.search("").draw();
        tblMissingDetail.order.neutral().draw();
        $('#detailNotFoundModal').modal({ backdrop: 'static', keyboard: false });
        $('#detailNotFoundModal').modal('show');
    //    //tblMissingDetail.columns.adjust().fixedColumns().relayout();
    //    //$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
    //    tblMissingDetail.rows().invalidate();
    //    tblMissingDetail.order([0]).draw()
    }
    else
        return false;
});

Googled the issue and tried all suggestions, all to no avail. Hopelessly stuck!