带有固定标题、水平滚动条和行垂直滚动条的表格

Question

我的目标是创建一个带有水平和垂直滚动条的表格，使表格标题在垂直滚动时保持可见。顶层 div 是列方向的 flexbox 容器，为标题提供固定高度并允许行占据所有剩余的垂直空间。我希望水平滚动条滚动 flexbox 容器的内容，而垂直滚动条应该只滚动行。但是，我得到了两个水平滚动条，一个根据需要滚动 flexbox 容器，另一个是滚动行的内部水平滚动条。

.data-grid {
  width: 400px;
  height: 150px;
  background: #e6e6ff;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.column-headers {
  flex-shrink: 0;
  flex-grow: 0;
}

.grid-rows {
  flex-shrink: 1;
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
}
    
.data-grid table {
    table-layout: fixed;
    empty-cells: show;
    width: 100%;
}

.data-grid tr {
    height: 40px;
}

.data-grid th.short-name-value, td.short-name-value {
    width: 10em;
}

<div class="data-grid">
  <div class="column-headers">
    <table>
      <tr>
        <th class="short-name-value">COLUMN 1</th>
        <th class="short-name-value">COLUMN 2</th>
        <th class="short-name-value">COLUMN 3</th>
      </tr>
    </table>
  </div>
  <div class="grid-rows flex-scrollable-y">
    <table>
      <tr>
        <td class="short-name-value">X</td>
        <td class="short-name-value">1</td>
        <td class="short-name-value">abc</td>
      </tr>
      <tr>
        <td class="short-name-value">Y</td>
        <td class="short-name-value">2</td>
        <td class="short-name-value">def</td>
      </tr>
      <tr>
        <td class="short-name-value">Z</td>
        <td class="short-name-value">3</td>
        <td class="short-name-value">ghi</td>
      </tr>
    </table>
  </div>
</div>

奇怪的是，如果我不向行添加垂直滚动条，我只会得到我想要的容器级水平滚动条，但是我仍然会在容器上得到一个垂直滚动条，尽管没有指定。

>

.data-grid {
  width: 400px;
  height: 150px;
  background: #e6e6ff;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.column-headers {
  flex-shrink: 0;
  flex-grow: 0;
}

.grid-rows {
  flex-shrink: 1;
  flex-grow: 1;
  min-height: 0;
  /*overflow-y: auto;*/
}
    
.data-grid table {
    table-layout: fixed;
    empty-cells: show;
    width: 100%;
}

.data-grid tr {
    height: 40px;
}

.data-grid th.short-name-value, td.short-name-value {
    width: 10em;
}

<div class="data-grid">
  <div class="column-headers">
    <table>
      <tr>
        <th class="short-name-value">COLUMN 1</th>
        <th class="short-name-value">COLUMN 2</th>
        <th class="short-name-value">COLUMN 3</th>
      </tr>
    </table>
  </div>
  <div class="grid-rows flex-scrollable-y">
    <table>
      <tr>
        <td class="short-name-value">X</td>
        <td class="short-name-value">1</td>
        <td class="short-name-value">abc</td>
      </tr>
      <tr>
        <td class="short-name-value">Y</td>
        <td class="short-name-value">2</td>
        <td class="short-name-value">def</td>
      </tr>
      <tr>
        <td class="short-name-value">Z</td>
        <td class="short-name-value">3</td>
        <td class="short-name-value">ghi</td>
      </tr>
    </table>
  </div>
</div>