css 如何扩展td中的div，使行中的高度过大

bogh5gae 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(174)

我有一个表格，其中的单元格有固定的高度。在其中一个单元格中有一个tall元素，它使一行垂直扩展。还有一个单元格中有一个div元素，它被设置为单元格高度的100%。我想使这个div元素垂直扩展到单元格高度，比原来设置的单元格高度更高。我该怎么做？

table,
th,
td {
  border: 4px solid black;
  border-collapse: collapse;
}

th,
td {
  background-color: orange;
  height: 30px;
  padding: 0px;
}

<table>
  <tr>
    <td>
      <div style="height:50px; background:green">Tall element</div>
    </td>
    <td>
      <div style="background:yellow;height:100%">Should expand</div>
    </td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

css

来源：https://stackoverflow.com/questions/74903632/how-to-expand-a-div-inside-a-td-with-a-height-in-a-row-that-is-too-big

1条答案

按热度按时间

1rhkuytd1#

动态div填充需要在父容器上使用100% height。要解决这个问题，我们可以将30px设置为min-height，并创建一个div CSS属性inheritheight。

table,
th,
td {
  border: 4px solid black;
  border-collapse: collapse;
  height: 100%;
}

th,
td {
  background-color: orange;
  padding: 0px;
  min-height:30px;
}
div {
height: inherit;
   }

<table>
  <tr>
    <td>
      <div style="height:50px; background:green">Tall element</div>
    </td>
    <td >
      <div style="background:yellow;">Should expand</div>
    </td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

赞(0）回复(0）举报 2022-12-24

我来回答

css 如何扩展td中的div，使行中的高度过大

1条答案

相关问题

热门标签

最新问答