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>

Answer 2

就像其他人在评论中提到的那样，最好使用div或其他一些标签但是如果您仍然想使用表格，可以执行以下操作

<table>

          <tr>
               <td>&nbsp;</td>
               <td id = "mid" rowspan="2"></td>
               <td></td>
           </tr>
          <tr>
               <td class = "side"></td>
               <td></td>
               <td class ="side"></td>
           </tr>
  </table>

这是一个小提琴

https://jsfiddle.net/vdadekvL/28/

如何使中间TD高于侧面TD？

2 个答案: