欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

最小高度-內容在表格內不起作用(鉻合金)

CSS
張吉惟2年前8瀏覽0評論

我想要一個固定高度的表格，其中每一行只占其內容所需的高度。表內的最后一行占據所有剩余空間。但是，整個表格的高度在各行之間平均分配。

注意:我不能使用固定高度的表格行，因為內容將是動態的和多行的

以下是我所做的:

<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>

我希望前2行的高度是18px，所有剩余的高度應該到第三行。但是，整個表體高度在三行之間平均分配。

測試時間: Chromium:版本107.0.5263.0(開發者版本)(arm64) Chrome:版本113.0.5672.126(正式版)(arm64)

這樣就可以了，刪除前兩個表格行中的內嵌css，然后將第三個表格行的值改為100%而不是auto。這樣，最后一行將獲得所有可用的高度。

<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>