如何实现嵌套表格下拉数据与表头对齐及按需显示

核心修复要点 #

1. 子表格对齐：移除主表格的浮动与偏移边距，让下拉容器宽度与主表格完全匹配，同步子表格列宽与主表头一致
2. 交互逻辑：移除hover触发的显示规则，保留点击切换的JS逻辑，确保子表格默认隐藏、点击显示

修正后的HTML代码 #

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

修正后的CSS代码 #

#mytable {
    background-color: white;
    border-collapse: collapse;
    width: 94%;
    margin: 0 auto;
}

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

.fixTableHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

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] {
    padding: 4px 20px;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 14px;
}

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

.input-icons {
    width: 40px;
    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;
}

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

.dropdown {
    position: relative;
    display: block;
    background-color: #D8D9DD;
    color: #898C9A;
    padding: 0.4em 0.3em;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: relative;
    width: 100%;
    background-color: white;
}

.dropdown-content.show {
    display: block;
}

table {
    width: 100%;
}

修正后的JS代码 #

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

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

内容的提问来源于stack exchange，提问作者Nick