Whenever I attempt to set the table header at a position other than 0, the body ends up scrolling above the header. Below is the code snippet showcasing the issue:
.test {
padding-top: 50px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
// rest of the HTML table rows...
</tbody>
</table>
</div>Trying out another approach, I added a TH element with a white background color before the column names. Here's the current code snippet I'm using:
.test {
padding-top: 0px;
}
th {
background-color: orange;
position: sticky;
top: 50px;
}
.spacer {
background-color: white;
position: sticky;
top: 0px;
height: 50px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="test">
<table class="table">
<thead>
<tr>
<th colspan="4" class="spacer"></th>
</tr>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
</thead>
<tbody>
// rest of the HTML table rows...
</tbody>
</table>
</div>I'm still facing issues and wondering if there's a better solution. Moving the body didn't yield the desired result.