HTML创建可重叠父表格行列的嵌套表格及点击展开功能问题

1. 修正HTML结构并添加交互逻辑 #

原HTML存在标签嵌套错误（tr直接嵌套在tr内），同时需要补充控制显示/隐藏的触发逻辑：

<body>
    <table id="tab1">
        <!-- 表头行 -->
        <tr>
            <td id="nameHeader" style="cursor: pointer;">Name</td>
            <td>Age</td>
            <td>Addresses</td>
        </tr>
        <!-- 数据行 -->
        <tr>
            <!-- 设置相对定位，作为展开表格的定位容器 -->
            <td style="position: relative;">
                <!-- 展开内容容器，默认隐藏 -->
                <div id="nameTableContainer" style="display: none; position: absolute; top: 0; left: 0; background: white; z-index: 10;">
                    <div>Name Table</div>
                    <table id="tab2">
                        <tr><td>Yash</td></tr>
                        <tr><td>Rocky</td></tr>
                        <tr><td>Garuda</td></tr>
                        <tr><td>Selena</td></tr>
                    </table>
                </div>
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <script>
        // 点击Name表头切换展开/隐藏状态
        const nameHeader = document.getElementById('nameHeader');
        const nameTableContainer = document.getElementById('nameTableContainer');
        
        nameHeader.addEventListener('click', function() {
            nameTableContainer.style.display = nameTableContainer.style.display === 'none' ? 'block' : 'none';
        });
    </script>
</body>

2. 优化CSS样式 #

调整样式确保边框、布局和覆盖效果正常：

#tab1 {
    border-collapse: collapse;
    border: 1px solid red;
}
#tab1 td {
    border: 1px solid red;
    padding: 8px;
    min-width: 120px;
}
#tab2 {
    border-collapse: collapse;
    border: 1px solid black;
    margin-top: 8px;
}
#tab2 td {
    border: 1px solid black;
    padding: 6px;
    min-width: 100px;
}
#nameTableContainer {
    border: 1px solid #ccc;
    padding: 8px;
}

关键修改说明 #

• 修复结构错误：移除非法的tr嵌套，将展开表格放在相对定位的td内，为绝对定位的覆盖容器提供基准。
• 实现列覆盖：给展开容器设置position: absolute和z-index:10，让它从Name单元格左上角开始显示，覆盖右侧的Age和Addresses列。
• 交互逻辑：通过JS监听表头点击事件，切换展开容器的显示状态。
• 样式优化：用border-collapse: collapse合并表格边框，设置单元格最小宽度保证布局稳定，添加内边距提升可读性。

内容的提问来源于stack exchange，提问作者M.Riyan