[英]Sticky table header
我使用html表展示一些信息。 該表可能很長。 因此,如果用戶向下滾動,則行的標題將超出屏幕范圍。
我想做的是使表格的標題變為粘性-當用戶向下滾動時。
這就是我的HTML + CSS + JS(jquery)的樣子: https : //jsfiddle.net/d3h7mxLf/2/
HTML:
<table id="the-table">
<thead>
<tr>
<th class="domain-col">Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
<tr>
<td>Joe</td>
<td>40</td>
</tr>
</tbody>
</table>
CSS:
th {
background-color:red;
}
#the-table {
width: 100%;
}
JQuery的:
var topPos;
function AncorControlMatches() {
topPos = Math.max(0, $("#the-table").offset().top - $(this).scrollTop());
if (topPos == 0) {
$("#the-table thead tr").css("top", topPos);
$("#the-table thead tr").css("position", "fixed");
} else {
$("#the-table thead tr").removeAttr("style");
}
}
$(window).scroll(function () {
AncorControlMatches();
});
$(document).ready(function () {
setTimeout(function () {
AncorControlMatches();
$(window).trigger('resize');
}, 300);
});
問題是當用戶向下滾動時,標題列寬度錯誤。 元素的寬度變得很小。
我該如何解決這個問題?
我已經更新了你的小提琴 。
您需要position: absolute
不fixed
因為固定位置錨定到視口,而不是包含的定位元素。
我知道這是一個已經解決的老問題,但是它的名稱很容易搜索,因此我認為今天添加一個解決方案是適當的。
對於現代瀏覽器,您可以使用粘性位置來實現相同的效果,而根本不需要任何Javascript!
粘性: https : //caniuse.com/#search=sticky
th {
background-color:red;
}
#the-table {
width: 100%;
position: relative;
}
#the-table thead th {
position: sticky;
top: 0;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.