如何让table左列定义高度（min-height:300px），右列始终显示滚动条？

嘿，这个需求我刚好处理过！要实现左列控制表格高度、右列内容超出滚动且不改变整体高度的效果，用CSS就能完美搞定，下面给你两种实用的实现方式：

方法一：基于原生HTML表格的实现 #

如果你想保留原生表格的结构，只需要给左列设置高度规则，同时让右列单元格变成一个可滚动的容器就行：

代码示例 #

<style>
  .controlled-table {
    border-collapse: collapse;
    width: 100%;
    /* 表格高度随左列内容自适应，同时保底300px */
    height: fit-content;
    min-height: 300px;
  }

  .controlled-table td {
    border: 1px solid #ddd;
    padding: 10px;
    vertical-align: top;
  }

  /* 左列：控制表格高度的核心 */
  .left-column {
    width: 30%;
    min-height: 300px;
    height: 100%;
  }

  /* 右列：内部容器实现滚动 */
  .right-column {
    width: 70%;
  }

  .scrollable-content {
    height: 100%;
    overflow-y: auto;
    /* 防止容器高度塌陷 */
    display: flex;
    flex-direction: column;
  }
</style>

<table class="controlled-table">
  <tr>
    <td class="left-column">
      <!-- 左列内容：少的时候表格保持300px，多的时候跟着涨 -->
      左列内容行1<br>
      左列内容行2
    </td>
    <td class="right-column">
      <div class="scrollable-content">
        <!-- 随便塞多少内容都不会撑大表格 -->
        右列内容行1<br>
        右列内容行2<br>
        右列内容行3<br>
        ...<br>
        右列内容行50<br>
      </div>
    </td>
  </tr>
</table>

核心逻辑 #

• 表格用height: fit-content让高度完全由左列内容决定，加上min-height:300px确保内容少的时候不会太矮。
• 左列的min-height和height:100%保证它的高度会成为整个表格的基准。
• 右列内部套的scrollable-content会继承单元格的高度（由左列定），超出部分自动滚动，完全不会影响表格整体高度。

方法二：CSS Grid模拟双列表格（更灵活） #

如果原生表格的约束让你觉得麻烦，用Grid布局可以更自由地实现需求，结构也更清晰：

代码示例 #

<style>
  .grid-table {
    display: grid;
    grid-template-columns: 30% 70%;
    border: 1px solid #ddd;
    /* 高度由左列主导，保底300px */
    height: fit-content;
    min-height: 300px;
  }

  .grid-cell {
    border: 1px solid #ddd;
    padding: 10px;
  }

  .left-grid {
    /* 左列的min-height确保表格高度不会低于300px */
    min-height: 300px;
  }

  .right-grid {
    /* 右列直接开启垂直滚动 */
    overflow-y: auto;
  }
</style>

<div class="grid-table">
  <div class="grid-cell left-grid">
    左列内容行1<br>
    左列内容行2
  </div>
  <div class="grid-cell right-grid">
    右列内容行1<br>
    右列内容行2<br>
    ...<br>
    右列内容行50<br>
  </div>
</div>

核心逻辑 #

• Grid容器的height: fit-content会自动取子元素中最高的高度作为容器高度，这里左列的min-height:300px会在内容少的时候把容器高度拉到300px，内容多的时候跟着左列涨。
• 右列直接设置overflow-y:auto，超出内容自动滚动，完全不影响容器高度。

两种方法的测试效果 #

不管用哪种方式，都能实现你要的效果：

• 左列内容少（比如2行）：表格/Grid容器稳定在300px，右列超出部分显示滚动条。
• 左列内容多（比如10行，高度超过300px）：容器高度跟着左列自适应，右列还是该滚就滚。

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