粘性表格标题

Question

我使用 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%;
}

查询：

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);
});

问题是当用户向下滚动时，标题列的宽度是错误的。元素的宽度变得非常小。

我该如何解决这个问题？

Answer 1

我知道这是一个已经解决的老问题，但它的名字很容易搜索，所以我认为添加今天的解决方案是合适的。

对于现代浏览器，您可以使用粘性位置来实现相同的效果，根本不需要任何 Javascript！

粘性：https : //caniuse.com/#search=sticky

th {
    background-color:red;
}
#the-table {
    width: 100%;
    position: relative;
}
#the-table thead th {
    position: sticky;
    top: 0;
}

示例：https : //jsfiddle.net/omsa8xt1/