如何使两个并排的表格Div容器高度一致

要让两个并排表格的边框高度和较高的那个保持一致，最省心的方法是改用Flexbox布局——它天然支持等高列，比传统float布局更简洁高效。

修改步骤： #

1. 重构.row的布局为Flexbox
2. 移除.column的float属性，让Flex自动管理列宽
3. 设置表格高度为100%，使其撑满容器

修改后的完整代码：

<style>
* {
  box-sizing: border-box;
}

.row {
  margin-left:-5px;
  margin-right:-5px;
  display: flex; /* 启用Flex布局，自动让子元素等高 */
  gap: 10px; /* 列之间的间距，替代padding的计算 */
}
  
.column {
  width: 50%;
  display: flex; /* 让内部表格能继承容器高度 */
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%; /* 关键：表格撑满容器高度 */
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 16px;
}

@media screen and (max-width: 600px) {
  .row {
    flex-direction: column; /* 小屏幕下垂直排列 */
    gap: 10px;
  }
  .column {
    width: 100%;
  }
}
</style>
<div class="row">
<div class="column">
<table style="background-color: #ffffff;">
<tbody>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="column">
<table style="background-color: #ffffff;">
<tbody>
<tr>
<td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>

兼容旧浏览器方案（IE9及以下） #

如果需要兼容老旧浏览器，可以改用表格布局：

.row {
  margin-left:-5px;
  margin-right:-5px;
  display: table;
  width: 100%;
}

.column {
  display: table-cell;
  width: 50%;
  padding: 5px;
}

table {
  height: 100%; /* 同样需要设置高度100% */
  /* 其他样式不变 */
}

关键原理： #

• Flexbox的align-items: stretch（默认值）会强制所有.column子元素高度一致
• 表格设置height: 100%后，会自动撑满父容器的高度，从而实现边框等高

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