如何在未指定高度的td单元格内分别放置顶部和底部内容行？

直接给左侧单元格启用flex布局，利用justify-content: space-between实现上下内容分离，同时让单元格容器自动继承表格行的高度（由右侧内容撑开），无需手动指定高度。

代码示例 #

<table border="1">
  <tr>
    <td class="left-cell">
      <div>顶部内容</div>
      <div>底部内容</div>
    </td>
    <td class="right-cell">
      右侧长内容<br>
      多行内容<br>
      用来撑开表格高度<br>
      测试自适应效果
    </td>
  </tr>
</table>

.left-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 可选：添加内边距优化视觉 */
  padding: 8px;
}

.right-cell {
  padding: 8px;
}

关键逻辑 #

1. 表格行的高度由右侧单元格的内容自动决定，左侧单元格会自动匹配这个高度。
2. 给左侧单元格设置display: flex后，它会成为flex容器，内部元素可以利用flex属性布局。
3. justify-content: space-between会让容器内的子元素分别贴紧顶部和底部，中间自动填充空白空间，完美适配单元格的自适应高度。

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