css table cell 高度自适应

CSS Table Cell 高度自适应 在使用 HTML 表格时，经常会遇到表格单元格高度不够自适应的问题。这时，我们可以通过使用 CSS 代码来实现单元格高度自适应。 首先，需要将单元格的显示属性设置为表格单元格：

p {
  display: table-cell;
}

然后，可以利用 CSS 中的垂直对齐方式，让单元格自动调整高度，例如：

p {
  display: table-cell;
  vertical-align: middle;
}

如果我们想要让单元格高度根据其内容自适应，我们可以使用 CSS 的 height 属性，并将其值设为 auto，如下所示：

p {
  display: table-cell;
  vertical-align: middle;
  height: auto;
}

这样设置之后，单元格的高度就会自适应内容并居中显示。 此外，如果我们想要在单元格中插入图片或其他元素，同样可以使用这种高度自适应的方法。只需要把图片或其他元素放在 p 标签中即可：

<td>
  <p>这是一个图片：</p>
  <p><img src="example.jpg"></p>
</td>

然后，设置样式：

p {
  display: table-cell;
  vertical-align: middle;
  height: auto;
}

这样插入的图片就会自适应高度并居中显示在单元格中了。 通过以上的方法，我们可以轻松实现表格单元格高度自适应，并让表格布局更加美观和合理。