html - 如何让中间的TD比旁边的TD高？

Question

我有一个包含 3 个单元格的表格，我想让中间的单元格比侧面的单元格高，所以例如中间的单元格的高度是 300px，侧面的单元格的高度是 200px。我给中间的一个单独的类而不是侧面的，我将中间的一个设置为 300px，侧面的为 200px。但他们的高度仍然相同，为什么？

#mid {
  width: 600px;
  height: 400px;
  border: solid 1px black;
}

.side {
  width: 300px;
  height: 300px;
  border: solid 1px black;
}

<table>
  <tr>
    <td class="side"></td>
    <td id="mid"></td>
    <td class="side"></td>
  </tr>
</table>

Answer 1

您应该只将表格用于表格数据，而不是用于布局。您尝试做的事情是无法通过表格实现的，因为一行中的所有表格单元格的高度将与该行中最高的单元格的高度相同。

相反，您应该使用 div，在下面的示例中，我使用了 flexbox 来对齐行中的 div:

.container {
  display: flex;
  width: 1200px;
  margin: auto;
}

.mid {
  width: 600px;
  height: 400px;
  border: solid 1px black;
}

.side {
  width: 300px;
  height: 300px;
  border: solid 1px black;
}

<div class="container">
  <div class="side"></div>
  <div class="mid"></div>
  <div class="side"></div>
</div>