粘性 header 相对 parent 溢出

Question

我到处都看到这个问题的变体，但 none 似乎解决了我的问题。我有一个高大的页面，由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;"，姑且称之为Div1吧。 Div1 中包含导致 X 和 Y 滚动条的内容。在 Div1 中，假设我有一个 table，其中的列太多导致 X 溢出，而行太多导致 Div1 的 Y 溢出。

有没有办法让 tables header 行粘在 Div1 的顶部并保持其宽度？

想象一下这样的结构：

<div id="MainPageDiv">
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    <div class=outerDiv>
        <table class="innerTable">
            <thead>
                //thead columns
            </thead>
            <tbody>
                //tbody rows
            </tbody>
        </table>
    </div>
    //OnScreenContent
    //OnScreenContent
    //OnScreenContent
    //OFFScreenContent
    //OFFScreenContent
    //OFFScreenContent
</div>

所以 outerDiv 和 table 位于页面顶部下方一点点。还要注意更下方有 OFFscreenContent。

我希望主页像正常情况一样滚动，但是在 outerDiv 部分中，当我在 outerDiv 中滚动时，我希望 thead 停留在 outerDiv 容器的顶部。

Answer 1

.outerDiv {
  overflow:scroll;
  height:140px;
}
thead {
 position:absolute;
  top:0; 
}
tbody {
  display:block;
  position:relative;
  padding-top:10px;
}

<div class="outerDiv">
  <table class="innerTable">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
      <th>Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
     <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>
</div>

有两种方法可以实现此目的

设置overflow:scroll；在 table.
您可以在此处使用 Bootstrap 内置 table-responsive class。 https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables

Answer 2

我最终使用 CSS 和 jQuery 获得了想要的结果。在我的包装器 class 中，我使用了 position: relative，在 table header 上，我设置了它的位置 absolute，在包装器滚动事件中，我调整了 top 包装器的 scrollTop() 的值。

粘性 header 相对 parent 溢出

Sticky header to relative parent with overflow

html

css

css-position

overflow