我使用html-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);
});
问题是当用户向下滚动时，标题列宽度错误。元素的宽度变得非常小。
我如何解决这个问题？
答案 0 :(得分：2)
我已更新了您的fiddle。
您需要position: absolute而非fixed，因为固定位置已锚定到视口，而不是包含定位元素。
答案 1 :(得分：2)
我知道这是一个已经解决的老问题，但是它的名称很容易搜索，因此我认为今天添加一个解决方案是适当的。
对于现代浏览器，您可以使用粘性位置来实现相同功能，而根本不需要任何Javascript！
粘性：https://caniuse.com/#search=sticky
th {
background-color:red;
}
#the-table {
width: 100%;
position: relative;
}
#the-table thead th {
position: sticky;
top: 0;
}