实现固定高度表格：行高动态自适应并模拟min-height效果

需求说明 #

需要实现一个固定高度的表格，同时让表格行具备动态高度，达到类似min-height的效果：

• 当表格部分行无数据、其余行数据充足时，空行收缩至指定最小高度，有数据的行按需伸展，整体内容超出表格高度时自动出现滚动条；
• 当表格所有行都为空时，保持固定高度，所有行均匀分配高度。

实现难点与解决方案 #

表格单元格无法直接设置min-height，尝试过包裹元素、调整height、overflow等属性但效果不佳，最终通过以下方式解决：

1. 用外层div包裹表格，给div设置固定宽高和overflow: auto，负责控制整体高度和滚动逻辑；
2. 表格设置display: table，配合行的样式实现动态高度分配。

代码示例 #

HTML

<div class="table-container">
  <table class="dynamic-table">
    <tbody>
      <tr><td></td></tr>
      <tr><td>这是一行有大量内容的单元格，内容会自动撑开高度，当整体超出容器高度时会出现滚动条。这是一行有大量内容的单元格，内容会自动撑开高度，当整体超出容器高度时会出现滚动条。这是一行有大量内容的单元格，内容会自动撑开高度，当整体超出容器高度时会出现滚动条。</td></tr>
      <tr><td></td></tr>
      <tr><td>另一行有内容的单元格，内容长度适中，高度会自适应。</td></tr>
      <tr><td></td></tr>
    </tbody>
  </table>
</div>

CSS

.table-container {
  height: 300px; /* 固定容器高度 */
  width: 100%;
  overflow: auto; /* 内容超出时触发滚动 */
  border: 1px solid #ccc;
}

.dynamic-table {
  display: table;
  width: 100%;
  height: 100%; /* 表格占满容器高度 */
  border-collapse: collapse;
}

.dynamic-table tr {
  height: 1px; /* 初始高度设为最小，让空行收缩 */
  min-height: 40px; /* 模拟行的min-height效果 */
}

.dynamic-table td {
  border: 1px solid #eee;
  padding: 8px;
}

效果说明 #

• 空行会收缩到min-height设置的40px；
• 有数据的行根据内容自动撑开高度，当所有行总高度超过容器的300px时，容器自动出现滚动条；
• 若所有行都为空，表格会占满容器的300px高度，所有行均匀分配高度。

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