固定列表格：其余列横向滚动+全局纵向滚动实现问题

我尝试过几种方案，但始终没法让表格的弹性部分在全局纵向滚动空间内完全拉伸。以下是我其中一个尝试的代码：

原代码示例 #

HTML #

<div class="staff outer">
  <div class="inner">
    <table class="fixed">
      <tr>
        <th>Header A</th>
        <th>Header A</th>
      </tr>
      <!-- ... 更多行 -->
    </table>
    <table class="flexible">
      <tr>
        <td>col 1 - A</td>
        <td>col 2 - A (WITH LONGER CONTENT)</td>
        <td>col 3 - A</td>
        <td>col 4 - A</td>
        <td>col 5 - A</td>
      </tr>
      <!-- ... 更多行 -->
    </table>
  </div>
</div>

SCSS #

.cell {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
}

.global-table {
  display: flex;
  overflow-y: scroll;
  height: 300px;

  .table {
    display: flex;
    flex-direction: column;
    .row {
      display: flex;
      .cell {
        max-width: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }

  .fixed {
    width: 200px;
  }

  .flexible {
    padding-bottom: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 300px;
    height: 100%;

    .cell {
      min-width: 50px;
    }
  }
}

问题分析 #

原方案的核心问题在于：

1. 全局滚动容器和弹性列的滚动规则冲突，.flexible设置了overflow-y: hidden导致纵向无法跟随全局拉伸
2. 两个表格的行高同步机制缺失，滚动时容易出现错位
3. 弹性列的宽度限制（width:300px）导致内容无法自然展开

修正后的实现方案 #

调整后的HTML #

<div class="global-table">
  <!-- 固定列表格 -->
  <div class="table fixed">
    <div class="row">
      <div class="cell">Header A</div>
      <div class="cell">Header B</div>
    </div>
    <div class="row">
      <div class="cell">Row 1 - Col 1</div>
      <div class="cell">Row 1 - Col 2</div>
    </div>
    <!-- ... 更多行 -->
    <div class="row">
      <div class="cell">Row 10 - Col 1</div>
      <div class="cell">Row 10 - Col 2</div>
    </div>
  </div>

  <!-- 弹性列容器（处理横向滚动） -->
  <div class="flexible-container">
    <div class="table flexible">
      <div class="row">
        <div class="cell">col 1 - A</div>
        <div class="cell">col 2 - A (WITH LONGER CONTENT)</div>
        <div class="cell">col 3 - A</div>
        <div class="cell">col 4 - A</div>
        <div class="cell">col 5 - A</div>
      </div>
      <div class="row">
        <div class="cell">Row 1 - Col 3</div>
        <div class="cell">Row 1 - Col 4</div>
        <div class="cell">Row 1 - Col 5</div>
        <div class="cell">Row 1 - Col 6</div>
        <div class="cell">Row 1 - Col 7</div>
      </div>
      <!-- ... 更多行 -->
      <div class="row">
        <div class="cell">Row 10 - Col 3</div>
        <div class="cell">Row 10 - Col 4 (LONG CONTENT HERE)</div>
        <div class="cell">Row 10 - Col 5</div>
        <div class="cell">Row 10 - Col 6</div>
        <div class="cell">Row 10 - Col 7</div>
      </div>
    </div>
  </div>
</div>

调整后的SCSS #

.cell {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding: 0.5rem;
  box-sizing: border-box; /* 确保内边距不影响宽度计算 */
}

.global-table {
  display: flex;
  height: 300px;
  overflow-y: hidden; /* 由子表格各自处理纵向滚动 */
}

.table {
  display: flex;
  flex-direction: column;
  overflow-y: scroll; /* 每个表格独立纵向滚动，保持行对齐 */
  height: 100%;
}

.row {
  display: flex;
  align-items: center; /* 确保单元格垂直居中对齐 */
  min-height: 48px; /* 统一行高，避免内容差异导致错位 */
}

.fixed {
  width: 200px;
  border-right: 1px solid #ccc;
}

.fixed .cell {
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.flexible-container {
  flex: 1; /* 占满剩余宽度 */
  overflow-x: scroll; /* 仅横向滚动 */
  height: 100%;
}

.flexible {
  width: fit-content; /* 表格宽度自适应内容 */
}

.flexible .cell {
  min-width: 100px; /* 保证单元格最小宽度 */
  white-space: nowrap; /* 内容不换行 */
}

关键修改说明 #

1. 拆分滚动职责：全局容器不再处理纵向滚动，让固定列和弹性列各自拥有纵向滚动条（若需完全同步，可通过JS监听滚动事件同步位置）
2. 弹性列容器：新增.flexible-container专门处理横向滚动，内部表格宽度自适应内容，解决拉伸问题
3. 统一行高：给.row设置最小高度，确保固定列和弹性列的行高一致，避免滚动错位
4. 盒模型修正：添加box-sizing: border-box确保单元格内边距不影响布局计算

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