Chrome中表格内height: min-content不生效问题求助

问题描述 #

需要实现固定高度的表格，要求：

• 前几行仅占用内容所需的高度
• 最后一行占用表格所有剩余空间
  但当前表格高度被所有行均分，且因内容为动态多行，无法为行设置固定高度。

当前实现代码：

<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（对应12px字号+1.5行高），剩余高度全部留给第三行，但实际表格主体高度被三行均分。

测试环境：

• Chromium: Version 107.0.5263.0 (Developer Build) (arm64)
• Chrome: Version 113.0.5672.126 (Official Build) (arm64)

解决方案 #

表格默认布局逻辑会自动分配高度，直接设置min-content或auto无法达到预期，以下是两种可行方案：

方案1：用CSS Grid模拟表格结构 #

放弃原生table标签，改用Grid布局实现相同样式，能更灵活控制行高：

<html>
  <style>
    .table-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 模拟两列表格 */
      font-size: 12px;
      line-height: 1.5;
      height: 500px;
    }
    .table-header {
      font-weight: bold;
      border-bottom: 1px solid #ccc;
    }
    .table-row {
      display: contents;
    }
    .table-cell {
      padding: 0 8px;
      border-bottom: 1px solid #eee;
    }
    /* 最后一行占剩余高度，内容顶部对齐 */
    .table-row:last-child .table-cell {
      align-self: start;
      height: 100%;
    }
  </style>
<body>
  <div class="table-container">
    <!-- 表头 -->
    <div class="table-header table-cell">Sr</div>
    <div class="table-header table-cell">Name</div>
    <!-- 行1 -->
    <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">Jack</div>
    </div>
    <!-- 行2 -->
    <div class="table-row">
      <div class="table-cell">2</div>
      <div class="table-cell">Joe</div>
    </div>
    <!-- 行3 -->
    <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">Jim</div>
    </div>
  </div>
</body>
</html>

方案2：优化原生表格样式 #

若必须使用原生table，可通过设置表格宽度、明确最后一行高度来实现：

<html>
  <style>
    table {
      font-size: 12px;
      line-height: 1.5;
      table-layout: fixed;
      height: 500px;
      width: 100%; /* 设置宽度确保布局生效 */
      border-collapse: collapse;
    }
    td {
      border-bottom: 1px solid #eee;
      padding: 0 8px;
    }
    tbody tr:not(:last-child) {
      height: min-content; /* 前几行仅占内容高度 */
    }
    tbody tr:last-child {
      height: 100%; /* 最后一行占剩余高度 */
    }
    tbody tr:last-child td {
      vertical-align: top; /* 最后一行内容顶部对齐 */
    }
  </style>
<body>
  <table>
    <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><td>3</td> <td>Jim</td></tr>
    </tbody>
  </table>
</body>
</html>

方案2的核心是给表格设置宽度，同时让最后一行高度设为100%，浏览器会自动将剩余高度分配给最后一行，前两行仅占用内容所需空间。

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