4
我正在使用粘性表格標題。當用戶滾動到表格和表格標題上時，我希望表格標題粘貼到頁面的頂部並跟隨用戶。我目前的問題是，當我將thead position更改爲absolute時，標題會丟失寬度。我如何保留（或重置？）標題寬度以符合我的列？如何在更改位置時保留表格標題寬度
注意：我不能使用任何常量，寬度可以根據數據更改。
注意：我知道插件，但是我在不使用插件的情況下編碼。
注意：我正在使用引導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',
});
}
});
你介意提供的css？如果沒有它，解決方案可能不會立即明確（或試圖複製它）。 – wahwahwah
@wahwahwah，謝謝你的迴應。我正在使用bootstrap。我是否應該在我的問題中包括這個？ –
我會將bootstrap作爲標籤添加到您的問題中，除非有人已經爲您解答。 – wahwahwah