我使用 html-table 来呈现一些信息。这张 table 可以很长。因此，如果用户向下滚动，行的标题将超出屏幕。
我想做的是让表格的标题在用户向下滚动时具有粘性。
这就是我的 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);
});
问题是当用户向下滚动时，标题栏的宽度是错误的。元素的宽度变得非常小。
我该如何解决这个问题？
最佳答案
我知道这是一个已经解决的老问题，但它的名字很容易搜索，所以我认为添加今天的解决方案是合适的。
对于现代浏览器，您可以使用粘性位置来实现相同的效果，而无需任何 Javascript!
置顶:https://caniuse.com/#search=sticky
th {
background-color:red;
}
#the-table {
width: 100%;
position: relative;
}
#the-table thead th {
position: sticky;
top: 0;
}
关于javascript - 粘性表头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28438578/