Detail header has zero height in jQuery data table master detail setting

I am trying to implement a master-detail data table that for most part works fine except the header in detail data table does not show. When I inspect the header I see it having a height of zero.

I googled for a solution and one thing that seems the explain the issue is that when table is hidden and then it is initialized, it ends up with header and footer having a height of zero.

I tried a few things to fix it but all to no avail. I would appreciate some suggestions.

Here is what I have, and have tried:

// Master data tabl
<table id="AITable" class="table table-striped table-bordered table-hover display compact">
    <thead>
        <tr>
            <th></th>
            <th>Col 1</th>
            <th>Col 2</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
    </tfoot>
</table>

<script type="text/javascript">
    var iTableCounter = 1;
    var oInnerTable = new Object;

    var tblAI = $("#AITable").DataTable({
        jQueryUI: true,
        data: [],
        dom: 'frtip',
        scrollY: 450,
        scrollCollapse: true,
        autoWidth: true,
        paging: false,
        sortCellsTop: true
        },
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            {
                "data": "COL1"
            },
            {
                "data": "COL2"
            }
    });

    function addDataTableListener() {
        // Add event listener for opening and closing details
        $('#AITable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = tblAI.row(tr);
            var col1 = row.data().COL1;

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Add the html table shell of the datatable.
                row.child(formatEDLTableDetailRow(iTableCounter)).show();

                //show the datatable row.
                tr.addClass('shown');

                // try datatable stuff
                oInnerTable = buildSubDataTable(row.data(), iTableCounter);
                populateSubTable(oInnerTable, col1);
                iTableCounter = iTableCounter + 1;
            }
        });
    }

    $(document).ready(function () {
        // This populates the top data table
        populateAITable(-1);
        addDataTableListener();
        ...
    });

    function buildSubDataTable(parentObjData, tableCounter) {

        //if ($.isEmptyObject(oInnerTable)) {
            oInnerTable = $("table#itemsDataTable_" + tableCounter).DataTable({
                jQueryUI: true,
                data: [],
                dom: 'tip',
                info: false,
                showEntries: false,
                autoWidth: false,
                paging: false
                },
                "columns": [
                    {
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, {
                        "data": "COL3",
                        "title": "Col 3"   // Tried adding "title", didn't work
                        }
                    },
                    {
                        "data": "COL4",
                        "title": "Col 4"
                    }
                ],
                "columnDefs": [
                    ...
                ],
                "fnInitComplete": function () {  // Tried this, didn't work
                    this.fnAdjustColumnSizing()
                }
            })
        //}
        return oInnerTable;
    }

    function populateSubTable(oInnerTable, someID) {
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "../WebService/AIR.asmx/GetSomething",
            cache: false,
            data: JSON.stringify({ SomeID: someID }),
        }).done(function (result) {
            oInnerTable.clear().draw();
            if (!result || result.d === "") {
            }
            else {
                jResult = JSON.parse(result.d);
                oInnerTable.rows.add(jResult).draw();
                oInnerTable.draw(false);
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
        });
    }

    function formatTableDetailRow(table_id) {
        // Tried adding class "header" with "height" and "line-height" set to 2rem; didn't help
        var tblMarkup = 
            '<div style="font-size: 1rem">' +
                '<table id="itemsDataTable_' + table_id + '" class="table table-striped table-bordered table-hover responsive display compact pull-left">' +
            '        <thead class="header">' +
            '            <tr class="header">' +
            '                <th></th>' +
            '                <th>Col 3</th>' +
            '                <th>Col 4</th>' +
            '            </tr>' +
            '        </thead>' +
            '        <tbody></tbody>' +
            '    </table>' +
            '</div>';
        return tblMarkup;
    }

The code is fine as is and works as expected. The reason for header row not showing was below CSS:

table#AITable thead {
    visibility: collapse;  <-- commented this out and header showed.
}