高度最小内容不工作表内( chrome )

kxeu7u2r 于 2023-06-03 发布在 Go

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

我想要一个固定高度的表格，其中每一行的高度仅与其内容所需的高度相同。和表内的最后一行来占用所有剩余空间。然而，整个表高度在行之间平均划分。

注意：我不能对表行使用固定高度，因为内容将是动态和多行的

这就是我所做的：

<html>
  <style>
    table {
      font-size: 12px;
      line-height: 1.5;
      table-layout: fixed;
    }
  </style>
<body>
  <table style="height: 500px;">
    <thead>
      <tr>
        <td>Sr</td>
        <td>Name</td>
      </tr>
    </thead>
    <tbody>
      <tr style="height: min-content;"><td>1</td><td>Jack</td></tr>
      <tr style="height: min-content;"><td>2</td><td>Joe</td></tr>
      <tr style="height: auto;"><td>3</td> <td>Jim</td></tr>
    </tbody>
  </table>
</body>

</html>

我希望前两行的高度是18px，其余的高度都应该到第三行。但是，整个表体高度在三行中平均分配。
测试对象： chrome ：Version 107.0.5263.0（Developer Build）（arm64）Chrome：版本113.0.5672.126（Official Build）（arm64）

google-chrome

来源：https://stackoverflow.com/questions/76396134/height-min-content-not-working-inside-table-chrome

1条答案

按热度按时间

t1qtbnec1#

这将做的伎俩，删除内联css在前两个表行，然后改变第三个表行的值为100%，而不是自动。这样，最后一行将获得所有可用的高度。

<html>
  <style>
    table {
      font-size: 12px;
      line-height: 1.5;
      table-layout: fixed;
    }
  </style>
<body>
  <table cellpadding="5" border="1" style="height: 500px; border-collapse: collapse;">
    <thead>
      <tr>
        <td>Sr</td>
        <td>Name</td>
      </tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Jack</td></tr>
      <tr><td>2</td><td>Joe</td></tr>
      <tr style="height: 100%;"><td>3</td> <td>Jim</td></tr>
    </tbody>
  </table>
</body>

</html>

赞(0）回复(0）举报 2023-06-03

我来回答

高度最小内容不工作表内( chrome )

1条答案

相关问题

热门标签

最新问答