I am currently working on creating a Bootstrap table that is responsive. My goal is to have the table head scroll along with the table data when scrolling down, without setting a fixed height for the table. I want the page to expand naturally as more rows are added, so simply using overflow-y: scroll won't work for me.
Even trying to use position: fixed or position: sticky has not solved my issue.
This is the code snippet I experimented with:
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
thead {
/* position: fixed; */
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<!-- More rows -->
</tbody>
</table>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<div class="example">
... Example ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>Is there any specific feature in Bootstrap that can help with achieving a fixed/sticky table header layout?