How can i align my table that a within a table dropdown data to cross pond with table title

I have table within a table were my other table is data that hold by dropdown , when the page load my data must be hidden only appear when you click on it. How can I align data that is hold by drop down to cross pond with title header of a table. The design of table should look like my output the one I provide. This what I have try:

  const dropdownHeaders = document.querySelectorAll('.dropdown');
    dropdownHeaders.forEach(header => {
        header.addEventListener('click', () => {
            const dropdownContent = header.querySelector('.dropdown-content');
            dropdownContent.classList.toggle('show');
        });
    });

    window.addEventListener('click', (event) => {
        dropdownHeaders.forEach(header => {
            const dropdownContent = header.querySelector('.dropdown-content');
            if (event.target !== header && event.target.parentNode !== header && event.target !== dropdownContent && !dropdownContent.contains(event.target)) {
                dropdownContent.classList.remove('show');
            }
        });
    });

    #mytable {
        float: right;
        background-color: white;
        border-collapse: collapse;
        margin-right: 45px;
        margin-left: -40px;
    }

    .fixTableHead {
        overflow-y: auto;
        height: 420px;
        margin-top: 6%;
    }

    .fixTableHead thead th {
        position: sticky;
        top: 0;
    }

    td {
        text-align: left;
        color: #898C9A;
        height: 85px;
        border: none;
        cursor: pointer;
    }

    th {
        background-color: rgb(255, 255, 255);
        border: none;
        height: 72px;
        text-align: left;
        font-weight: normal;
        color: #898C9A;
        cursor: pointer;
    }

    .tb {
        box-shadow: 0px 3px 10px 0px rgb(236, 240, 241);
    }

    .tb:hover {
        background-color: #7C99AA;
        color: white;
    }

    .tb:hover td {
        color: white;
    }

    input[type=text] {
        float: center;
        padding: 4px 20px;
        margin-top: 8px;
        margin-right: 16px;
        font-size: 2px;
    }

    .input-icons i {
        position: absolute;
        color: #898C9A;
        margin: 113px 180px 180px 95px;
        z-index: 3;
        cursor: pointer;

    }

    .input-icons {
        width: 40;
        margin-bottom: -30px;
    }

    .icon {
        padding: 5px;
        color: #898C9A;
        min-width: 100px;
        text-align: left;
        margin-left: 10px;

    }

    #input-field {
        width: 15%;
        padding: 8px 12px;
        text-align: left;
        font-style: italic;
        color: #898C9A;
        background-color: #F8F8FB;
        transform: translate(25%, 25%);
        margin-top: 100px;
        padding-left: 55px;
        border: 0;
        cursor: pointer;
        outline: none;

    }

    .input.field:hover {
        color: white;
    }

    .select {
        width: 50px;
        height: 20px;
        cursor: pointer;
        margin-left: 0.5vw;
        accent-color: #7C99AA;
    }

    .dropdown-action {
        width: 97.6%;
        background-color: #D8D9DD;
        color: #898C9A;
        padding: 0.4em 0.3em;
        border-radius: 0.25em 0.25em 0em 0em;
        cursor: pointer;
        display: flex;
        align-items: left;

    }

    .dropdown {
        position: relative;
        display: inline-block;
        width: 2269.2%;
        height: 25px;
        background-color: #D8D9DD;
        color: #898C9A;
        margin-top: 50px;
        text-align: left;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        width: 56.7%;
        top: 100%;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    table {
  width: 100%;
}

<body>
    <div class="fixTableHead">
        <table id="mytable" style="width:94%" class="table table-striped mt32 customers-list">
            <thead>
                <tr class="tb">
                    <th style="width: 4vw;"></th>
                    <th style="width:2.5vw;">#</th>
                    <th>student name</th>
                    <th>surname</th>
                    <th>course</th>
                    <th>start date</th>
                    <th>end date</th>
                    <th>pass mark</th>
                    <th>remark</th>
                </tr>
            </thead>
            <tr class="tbTable">
                <th class="dropdown" colspan="9">
                    <span><i class="mdi mdi-menu-down">Student</i></span>
                    <div class="dropdown-content">
                        <table  style="width:94%" class="table table-striped mt32 customers-list">
                            <tr id="record-1" class="tb rowSelect">
                                <td><input class="select" id="select_0" type="checkbox" record="record-1" name="chk"></td>
                                <td>1</td>
                                <td>Lucky</td>
                                <td>Daniel</td>
                                <td>Software Development</td>
                                <td>26 Jan 2022</td>
                                <td>06 Jun 2023</td>
                                <td></td>
                                <td>NO</td>
                            </tr>
                            <tr id="record-3" class="tb rowSelect">
                                <td><input class="select" id="select_1" type="checkbox" record="record-3" name="chk"></td>
                                <td>2</td>
                                <td>Deon</td>
                                <td>James</td>
                                <td>Networking</td>
                                <td>26 Jan 2022</td>
                                <td>20 Nov 2023</td>
                                <td></td>
                                <td>Yes</td>
                            </tr>
                        </table>
                    </div>
                </th>
            </tr>
        </table>
    </div>
</body>