如何让元素粘在不同的可滚动容器上以实现不同的滚动方向？

Question

我在

width: 100%; overflow-x: auto;

容器内有一张又长又宽的桌子，我试图同时实现以下目标：

• 使标题行粘在视口的顶部边缘；
• 使第一列粘在容器的左边缘。

这是我所拥有的页面的一个极其简化的示例：codepen。

有时候视口可以足够宽，但是行数太多，所以出现垂直滚动：

有时表格对于给定的视口来说太宽，因此会出现水平滚动：

有时垂直和水平滚动可以同时发生。

---

我可以通过以下样式轻松使第一列粘在左边缘：

th:first-child, 
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

但是，我未能在不破坏基本布局的情况下使标题行粘在顶部边缘：

.container {
  width: 100%;
  /* overflow-x: auto; */ /* no way! */
}

th {
  position: sticky;
  top: 0;
}

如何克服这个问题？感谢您的任何想法。

我显然不能放弃基于容器的水平滚动而转而使用视口滚动，因为这样表格上方的内容也将是可滚动的。

Answer 1

在第一行和第一列上使用粘性功能都可以。标题没有向上滚动。它只是被 tbody 行覆盖。

您可以调整左上角单元格的 z 索引，以防止它被其他单元格覆盖。

.container {
  width: 100%;
  max-height: 100vh;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  white-space: nowrap;
  box-sizing: border-box;
}

td {
  background: white;
}

th {
  background: #f2f2f2;
}

.container th {
  &:first-child {
    z-index: 1;
  }
  position: sticky;
  top: -1px;
}

.container td:first-child,
th:first-child {
  position: sticky;
  left: -1px;
}

<h1>
  HR DB (just example)
</h1>

<div class="container">
  <table>
    <thead>
      <tr>
        <th>Employee ID</th>
        <th>Full Name</th>
        <th>Department</th>
        <th>Position</th>
        <th>Start Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>EMP001</td>
        <td>John Smith</td>
        <td>Marketing</td>
        <td>Marketing Manager</td>
        <td>2020-03-15</td>
      </tr>
      <tr>
        <td>EMP002</td>
        <td>Emma Johnson</td>
        <td>Human Resources</td>
        <td>HR Specialist</td>
        <td>2019-11-02</td>
      </tr>
      <tr>
        <td>EMP003</td>
        <td>Michael Brown</td>
        <td>IT</td>
        <td>Senior Developer</td>
        <td>2018-07-20</td>
      </tr>
      <tr>
        <td>EMP004</td>
        <td>Sarah Davis</td>
        <td>Sales</td>
        <td>Sales Representative</td>
        <td>2021-01-10</td>
      </tr>
      <tr>
        <td>EMP005</td>
        <td>David Wilson</td>
        <td>Finance</td>
        <td>Financial Analyst</td>
        <td>2020-09-05</td>
      </tr>
      <tr>
        <td>EMP006</td>
        <td>Jennifer Lee</td>
        <td>Customer Service</td>
        <td>Customer Support Manager</td>
        <td>2019-04-18</td>
      </tr>
      <tr>
        <td>EMP007</td>
        <td>Robert Taylor</td>
        <td>Operations</td>
        <td>Operations Coordinator</td>
        <td>2020-11-30</td>
      </tr>
      <tr>
        <td>EMP008</td>
        <td>Lisa Anderson</td>
        <td>Marketing</td>
        <td>Content Writer</td>
        <td>2021-06-22</td>
      </tr>
      <tr>
        <td>EMP009</td>
        <td>Daniel Martinez</td>
        <td>IT</td>
        <td>Network Administrator</td>
        <td>2018-12-01</td>
      </tr>
      <tr>
        <td>EMP010</td>
        <td>Emily White</td>
        <td>Human Resources</td>
        <td>Recruitment Specialist</td>
        <td>2020-02-14</td>
      </tr>
      <tr>
        <td>EMP011</td>
        <td>Christopher Clark</td>
        <td>Sales</td>
        <td>Account Manager</td>
        <td>2019-08-07</td>
      </tr>
      <tr>
        <td>EMP012</td>
        <td>Olivia Harris</td>
        <td>Finance</td>
        <td>Accountant</td>
        <td>2021-03-29</td>
      </tr>
      <tr>
        <td>EMP013</td>
        <td>William Turner</td>
        <td>IT</td>
        <td>Software Engineer</td>
        <td>2020-07-11</td>
      </tr>
      <tr>
        <td>EMP014</td>
        <td>Sophia Rodriguez</td>
        <td>Marketing</td>
        <td>Digital Marketing Specialist</td>
        <td>2019-10-05</td>
      </tr>
      <tr>
        <td>EMP015</td>
        <td>James Nelson</td>
        <td>Operations</td>
        <td>Logistics Manager</td>
        <td>2018-05-19</td>
      </tr>
      <tr>
        <td>EMP016</td>
        <td>Ava Thompson</td>
        <td>Customer Service</td>
        <td>Customer Support Representative</td>
        <td>2021-09-03</td>
      </tr>
      <tr>
        <td>EMP017</td>
        <td>Alexander Scott</td>
        <td>Sales</td>
        <td>Business Development Manager</td>
        <td>2020-01-25</td>
      </tr>
      <tr>
        <td>EMP018</td>
        <td>Mia Green</td>
        <td>Human Resources</td>
        <td>Training Coordinator</td>
        <td>2019-06-14</td>
      </tr>
      <tr>
        <td>EMP019</td>
        <td>Ethan Baker</td>
        <td>IT</td>
        <td>Data Analyst</td>
        <td>2021-04-07</td>
      </tr>
      <tr>
        <td>EMP020</td>
        <td>Isabella King</td>
        <td>Finance</td>
        <td>Financial Controller</td>
        <td>2018-09-22</td>
      </tr>
    </tbody>
  </table>
</div>