I am working on a sticky table header. When the user scrolls into the table and above the table title, I want the table title to adhere to the top of the page and keep track of the user. My current problem is that when changing thead positionto absoluteheaders, they lose their width. How can I save (or reset?) The width of the header to stick to my columns?
Note. I can not use any constants, the width may vary depending on the data.
Note. I know plugins, but I encode it without using plugins.
Note. I work with boot CSS.
HTML
<div class="table-responsive" style="overflow:auto">
<table id="table" class="table tablesorter table-striped table-hover">
<thead id='tableHeader' style="background-color:white;">
<tr>
<th class='header'>Column1 Head</th>
<th class='header'>Column2 Head</th>
<th class='header'>Column3 Head</th>
<th class='header'>Column4 Head</th>
<th class='header'>Column5 Head</th>
<th class='header'>Column6 Head</th>
<th class='header'>Column7 Head</th>
</tr>
</thead>
<tbody id='tableBody'>
</tbody>
</table>
</div>
Javascript
var tableHeaderTop = $("#tableHeader").offset().top;
$( window ).scroll(function() {
if(tableHeaderTop - $(window).scrollTop() <= 0){
console.log('scroll below header');
$('#tableHeader').css({
position:'absolute',
top: $(window).scrollTop() - $("#top").height() -15
});
}else{
console.log('scroll above header');
$('#tableHeader').css({
position:'static',
});
}
});
