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和表格位于页面顶部下方。另外请注意，OFFscreenContent位于更下方。

我希望主页像往常一样滚动，但是当我在externalDiv中滚动时，我希望thead停留在externalDiv容器的顶部。

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>

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

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

Answer 2

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

相对于父级的粘性标头出现溢出

2 个答案: