I have a container with a dropdown at the top and a table at the bottom. I am implementing ngx-infinite-scrolling feature, and I want the container and the table header to remain fixed when scrolling down as more data is loaded.
You can view the jsfiddle example here.
Here is the HTML code snippet:
<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
}
I attempted using position:static on the container, but it caused the table to overlap when scrolled down. Any suggestions on how to make both the container and its table header fixed are welcome. Thank you.