Question

我有一个div，我有一个下拉菜单，然后在底部有一张桌子。我正在使用ngx-infinite-scrolling，当我滚动时，我希望div和表头保持固定，因为添加了更多数据并向下滚动。

这是一个jsfiddle JSFiddle

Html代码：

 <div class="topTable row ">

  <div class="col-md-4 col-lg-3 col-sm-4 col-6">
  <form class="form-inline">
      <div class="form-group" style="width:100%;max-width:200px;">
        <div class="input-group" style="width:100%">
            <select class="form-control"  >
                <option >All</option>
                <option >Option1</option>
                 <option >Option1</option>
                  <option >Option1</option>
              </select>

        </div>
   </div>


 <div class="container-fluid">
   <div class="col-md-12">
  <div class="col-md-12 tableDiv"  >
  <div class="constrained"  >
  <table class="table table-striped col-md-12 table-condensed cf" >
  <thead class="table-bordered cf">
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
      <th>Column5</th>
      <th>Column6</th>

    </tr>
  </thead>
  <tbody >
    <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
        <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
        <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
        <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
        <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>
        <tr>
      <td > asdf</td>
      <td >asdfa</td>
      <td >fsdf</td>
      <td>sdfsfd</td>
      <td>sdfs</td>
      <td>fsdfsdf</td>
    </tr>

   </tbody>
  </table>
 </div>
  <div>
  </div>
 </div>
</div> 
</div>

CSS：

.topTable{
 height:70px;
background:red;
margin-top:-20px;
margin-bottom:20px;     
display: flex;
padding-left: 32px;
border:1px solid rgba(0,0,0,.1)
}

.tableDiv{
margin-top:50px
}

我尝试在div上放置position：static，但是在向下滚动时，表格会在它上面。如何使表静态和其标题固定？任何帮助表示赞赏

Answer 1

您必须将顶部块与内容块分开，否则您可以修复所有内容。

现在你可以修复第一个块，块必须获得100％宽度，z-index比内容块更多（默认值为0 - ＆gt;所以我们需要1或更高）。

position:fixed;
width:100%;
z-index: 1;

我把你的小提琴分开：http://jsfiddle.net/n958b7q3/1/ 更改已标记。

一些提示：

HTML

你需要很多div，只有在真正需要的时候才能制作新的div。
您的表单没有结束标记</form>

的CSS：

您在;

border:1px solid rgba(0,0,0,.1)

滚动时固定div和表头

1 个答案: