html - 如何在垂直滚动时固定表格的位置。在 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

最好的方法是使用 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>