如何在垂直滚动时固定表格的位置。在 y 轴上固定位置，但在 x 轴上可滚动

Question

我需要在滚动时修复用作标题的表格的位置。我试图实现数据表水平和垂直滚动的功能，而它的数据单元格宽度保持不变。现在的问题是，每当我尝试修复用于标题的表格的位置时，它都不会随着水平滚动而滚动。我只想在垂直滚动时修复顶部标题表，但它应该水平滚动。

这是我使用的css

table {
    line-height: 3;
    border-collapse: collapse;
    min-width: 100%;
    display: block;
}

table td span {
    white-space: normal;
    line-height: 1.2;
}

table th,
table td {
    padding: 0 10px !important;
    line-height: 1.2;
    min-width: 175px;
    max-width: 175px;
}

#table1 th:first-child {
    padding-left: 5px;
}

table th {
    background: #f9f9f9;
}

table .table-frame {
    height: 300px;
    overflow-y: scroll;
}

.scroll-table-holder {
    overflow-x: auto;
    white-space: nowrap;
    max-height: calc(100vh - 350px);
}

.text-left{
  text-align: left;
}

这里是plunker，带有完整的 html 和 css。在这个 plunker 上，它只需要在垂直滚动时将用于标题的表格固定在顶部

Answer 1

我正在努力解决数据网格组件的类似问题。我使用 flexbox 来布局标题和单元格（作为行），然后将内容包装在可滚动窗格中以获得所需的访问权限。

查看此codepen 以查看它是否正常工作。仅供参考 - codepen 实际上是在尝试解决一个不同的问题，但它可能会为您提供一些关于使用 flexbox 进行布局和窗格用于可滚动内容的想法。

SCSS

body {
    padding: 25px;
}

p {
    margin: 12px 0;
}

.datagrid-host {
    border: 1px solid;

    .datagrid-action-overflow {
        border-bottom: 1px solid;
    }

    .datagrid-viewport {
        display: flex;
        flex-direction: row;
        .datagrid-pinned-data {
            flex: 0 0 auto;
            width: 250px;
            border-right: 1px solid;
            display: flex;
            // display: none;
            flex-direction: column;
            height: 200px;
            .pinned-header {
                flex: 0 0 auto;
                background-color: #dcdcdc;
            }
            .pinned-data {
                flex: 1 1 auto;
                &.y-scrollable-pane {
                    flex: 1 1 auto;
                    position: relative;/* need this to position inner content */
                    overflow-y: auto;
                }
            }
        }

        .x-scrollable-pane {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            height: 200px; // sets the height of the datagrid
            overflow-x: auto;

            .datagrid-column-header {
                flex: 0 0 auto;
                background-color: #dcdcdc;
                width: 1900px; // must be same width as .page-content
            }

            .y-scrollable-pane {
                flex: 1 1 auto;
                position: relative;/* need this to position inner content */
                overflow-y: auto;
                width: 1900px; // must be same width as .page-header
            }
        }
    }

    .datagrid-footer {
        border-top: 1px solid;
    }
}

.datagrid-row {
    display: flex;

    .datagrid-cell {
        width: 10%;
    }
}

HTML

<div class="datagrid-host">
  <div class="datagrid-action-overflow">
    <button>Action 1</button>
    <button>Action 2</button>
    <button>Action 3</button>
    <button>Action 4</button></div>
  <div class="datagrid-viewport">
    <div class="datagrid-pinned-data">
        <div class="x-scrollable-pane"> <!-- if we do more than one column pinnible this width needs to be dynamic, and scrollable? -->
            <div class="datagrid-column-header">
              <div class="datagrid-row">
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
                  <div class="datagrid-cell">Column</div>
              </div>
            </div>
            <div class="y-scrollable-pane">
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
              <div class="datagrid-row">
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
                <div class="datagrid-cell">Cell</div>
              </div>
            </div>
          </div>
        </div>
    <div class="x-scrollable-pane">
      <div class="datagrid-column-header">
          <div class="datagrid-row">
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
            <div class="datagrid-cell">Column</div>
        </div>
        </div>
        <div class="y-scrollable-pane">
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
          <div class="datagrid-row">
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
            <div class="datagrid-cell">Cell</div>
          </div>
        </div>
      </div></div>
  <div class="datagrid-footer">Footer</div>
</div>

Answer 2

最好的方法是使用 javascript。你可以找到答案here
但是你仍然想使用纯 CSS。我们需要走一走：

.scroll-container {
  width: 300px;
  height: 300px;
  border: solid 1px #000;
  overflow: auto;
}

.scroll-content {
  width: 500px;
  height: calc(100% - 50px);
  overflow-y: auto;
}

td {
  min-width: 100px;
  height: 50px;
}
 

<div class="scroll-container">
  <table>
    <tr>
      <td>Head1</td>
      <td>Head2</td>
      <td>Head3</td>
      <td>Head4</td>
      <td>Head5</td>
    </tr>
  </table>
  <div class="scroll-content">
    <table>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
      <tr>
        <td>content1</td>
        <td>content2</td>
        <td>content3</td>
        <td>content4</td>
        <td>content5</td>
      </tr>
    </table>
  </div>

</div>