如何使相邻嵌套表格等高并实现垂直滚动效果？

需要让相邻的两个嵌套表格高度一致、尺寸相同，同时支持垂直滚动。尝试过vh、%、px等单位，也用div包裹表格，但都没效果，且必须保留大量嵌套表格的结构。

解决方案 #

核心问题是滚动容器的父元素没有设置明确高度，导致height:100%无法继承生效。以下是修改后的代码：

修改后的CSS #

/* 外层容器设置固定高度，作为两个表格的高度基准 */
.wrapper-container {
  height: 250px; /* 可根据需求调整数值 */
}

.tableScroll {
  overflow-y: auto;
  height: 100%;
  display: block; /* 确保容器占满父元素高度 */
}

.tableScroll thead th {
  position: sticky;
  top: 0;
  z-index: 1; /* 防止表头被滚动内容覆盖 */
}

th {
  background: #eee;
}

/* 给承载滚动容器的td设置100%高度，让滚动容器能继承高度 */
.scroll-table-td {
  height: 100%;
}

修改后的HTML #

<table width='80%' border='10' align='center'>
  <tr>
    <td>毛重</td>
    <td>10.0000</td>
    <td>净重</td>
    <td>8.0000</td>
    <td colspan='3'>&nbsp;</td>
  </tr>
  <tr>
    <td colspan='7'>
      <!-- 新增外层固定高度容器 -->
      <div class="wrapper-container">
        <table width='100%' border='5'>
          <tr>
            <td colspan='2'>WEEE</td>
          </tr>
          <tr>
            <td width='35%' valign='top' class="scroll-table-td">
              <table width='100%' height='100%' border='10'>
                <tr>
                  <td>国家</td>
                  <td colspan='2'>
                    <select>
                      <option>比利时</option>
                      <option>荷兰</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>WEEE</td>
                  <td class="scroll-table-td">
                    <div class='tableScroll'>
                      <table width='100%' border='1'>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                        <tr>
                          <td width='20%'>Recupel 4.3</td>
                          <td width='80%'>电气类物品</td>
                        </tr>
                      </table>
                    </div>
                  </td>
                  <td>-></td>
                </tr>
              </table>                    
            </td>
            <td width='65%' valign='top' class="scroll-table-td">
              <div class='tableScroll'>
                <table width='100%' border='1'>
                  <thead>
                    <tr>
                      <th width='5%'>国家</th>
                      <th width='18%'>编码</th>
                      <th width='75%'>描述</th>
                      <th width='2%'>&nbsp;</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>BE</td>
                      <td>Recupel 4.63</td>
                      <td>电子类物品</td>
                      <td>X</td>
                    </tr>
                    <tr>
                      <td>BE</td>
                      <td>Recupel 24.63</td>
                      <td>电子类物品</td>
                      <td>X</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

关键说明 #

• 给最外层容器设置固定高度，作为两个滚动表格的统一高度基准
• 给承载滚动容器的<td>添加scroll-table-td类并设置height:100%，确保滚动容器能正确继承父元素高度
• 给.tableScroll添加display:block，消除表格元素对高度计算的影响，让height:100%生效
• 给sticky表头添加z-index:1，避免滚动时表头被表格内容遮挡

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