html - 如何使中间的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>