带有溢出的相对父母的粘头标头

Question

我到处都看到了这个问题的变化，但似乎没有一个解决我的问题。由于内容，我有一个高大的页面，该页面已经有一个y卷。内容的一部分是div style="position: relative;"，我们称其为Div1。Div1的内容在其中引起X和Y卷轴。在Div1中，假设我有一张具有许多列的桌子，以至于它导致X溢出和许多行，从而导致Div1的y溢出。

有什么方法可以使桌子排在顶部的顶部排在顶部，并在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和桌子从页面顶部稍微向下坐了一点。另请注意，范围内有更远的范围。

我希望主页像正常一样滚动，但是在OuterDiv部分中，我希望Thead在我在OuterDiv中滚动时停留在OuterDiv容器的顶部。

Answer 1

我最终使用CSS和jQuery获得了所需的结果。在包装器类中，我使用了position: relative，在表标头上，我将其设置为absolute，在包装器滚动事件中，我将top值调整为包装器的scrollTop()。

Answer 2

.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>

有两种方法可以实现此

1. 设置溢出：滚动；在表的父元素上。
2. 您可以在此处使用Bootstrap Instrap Instrap 表响应类。https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables