带有溢出的相对父级的粘性标题

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 和 table 位于页面顶部的下方。另请注意，下方还有 OFFscreenContent。

我希望主页能够像往常一样滚动，但在 outerDiv 部分中，当我在 outerDiv 中滚动时，我希望thead 保持在 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 内置的 table-responsive 类。 https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables