CSS 如果父级有overflow-x: auto，如何为元素设置粘性？

Question

我找不到解决我的问题的方法。 我有一个表格，我需要添加水平滚动（overflow-x：auto）和表格的粘性标题。

我尝试添加一个不同位置的包装纸 - 但它不起作用。
我需要在垂直滚动方面粘贴标题

我怎样才能做到这一点？

https://codepen.io/ilyakorn/pen/zYQzaar

.main {
  overflow-y: auto;
  width: 700px;
  height: 300px;
  border: 5px solid black;
}

.wrapper {
  width: 300px;
  overflow-x: auto;
}

table {
  border: 1px solid red;
}

th {
  border: 1px solid blue;
  padding: 10px;
  position: sticky;
  top: 0;
  background: white;
  z-index: 30;
}

td {
  border: 1px solid brown;
  padding: 10px;
}

Answer 1

水平滚动条正在工作。它只是被设置了

main

的

overflow-y:auto

div 隐藏了。一直向下滚动就可以看到它。

话虽如此，在同一个表包装器上设置溢出 y 和溢出 x 更有意义。如果您想要做的是让用于滚动表格主体的垂直滚动条出现在

main

div 上，那么这是不可能的，而且在视觉上也没有什么意义。

.main {
  width: 700px;
  height: 300px;
  border: 5px solid black;
}

.wrapper {
  width: 300px;
  height: 100%;
  overflow: auto;
}

table {
  border: 1px solid red;
}

th {
  border: 1px solid blue;
  padding: 10px;
  position: sticky;
  top: 0;
  background: white;
  z-index: 30;
}

td {
  border: 1px solid brown;
  padding: 10px;
}

<div class="main">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th>Title 1</th>
          <th>Title 2</th>
          <th>Title 3</th>
          <th>Title 4</th>
          <th>Title 5</th>
          <th>Title 6</th>
          <th>Title 7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
        <tr>
          <td>Td1</td>
          <td>Td2</td>
          <td>Td3</td>
          <td>Td4</td>
          <td>Td5</td>
          <td>Td6</td>
          <td>Td7</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>