使div和表头固定在滚动上 [英] Make div and table header fixed on scroll
问题描述
我有一个div,其中有一个下拉列表,然后在底部有一个表格. 我正在使用ngx-infinite-scrolling,并且当我滚动时,我希望div和表的标题在添加和向下滚动更多数据时保持固定.
I have a div where I have a dropdown and then on the bottom there's a table. I am using ngx-infinite-scrolling, and when I scroll i want the div and the header of the table to remain fixed as more data is added and scrolled down.
这是jsfiddle JSFiddle
This is a 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
}
我尝试将position:static放在div上,但然后向下滚动,表格将放在其顶部. 如何还使表静态和其标头固定? 感谢您的帮助
I tried putting position:static on the div, but then on scroll down, table would go on top of it. How to also make table static and its header fixed ? Any help is appreciated
推荐答案
您必须将内容块与内容块分开,否则,请固定所有内容.
You have to separate the top-block from the content-block, otherwise you make everything fixed.
现在您可以固定第一个块,该块必须具有比内容块大100%的宽度和z索引(默认值为0->因此我们需要1或更高).
Now you can make the first block fixed, the block has to get 100% width and z-index more than the content block (default is 0 -> so we need 1 or higher).
position:fixed;
width:100%;
z-index: 1;
我已经分叉了您的小提琴: http://jsfiddle.net/n958b7q3/1/ 更改已标记.
I have forked your fiddle: http://jsfiddle.net/n958b7q3/1/ changes are marked.
一些提示:
html
- 您有很多div,只有在确实需要时才创建新的div
- 您的表单没有结束标签
</form>
css:
- 您忘记了
border:1px solid rgba(0,0,0,.1)
之后的
;
这篇关于使div和表头固定在滚动上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!