我正在处理一个粘性表头的问题。当用户滚动到表格并经过表头时，我希望表头固定在页面顶部并跟随用户。目前的问题是，当我将
注意：我不能使用任何常量，宽度可能会根据数据而变化。
注意：我知道插件，但是没有使用插件编写代码。
注意：我正在使用bootstrap CSS。
HTML
thead position 更改为 absolute 时，表头失去了宽度。如何保持（或重置？）标题宽度以与我的列一起固定？注意：我不能使用任何常量，宽度可能会根据数据而变化。
注意：我知道插件，但是没有使用插件编写代码。
注意：我正在使用bootstrap 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
//Window scroll event listener to fix table headers
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',
});
}
});
