如何使表头固定到 HTML 表格的顶部？答案

【问题标题】：How to make table header pinned to top of HTML table?如何使表头固定到 HTML 表格的顶部？
【发布时间】：2017-01-28 18:09:02
【问题描述】：

我有一个网页，用于比较多个事物的特性，我们称它们为小部件。每个小部件都表示为它自己的列，并且行是小部件的每个可能的特征。每个单元格表示每个小部件是否支持该功能。

现在，有很多功能，使页面非常高。也可能有很多小部件，因此表格也很宽，列也很宽。因此，滚动非常重要。

问题是当用户向下滚动时，我希望始终将标题行固定在顶部，并且只滚动表格的其余部分。表格上方也有一些文字，当用户向下滚动时，我希望该文字滚动到页面外，但标题应该停在顶部。

这至少是这张桌子的布局模型：

    <div>

        <table id="compareTable">
            <tr class="compareTableHead" id="compareHead">
                <td>Widget One</td>
                <td>Widget Two</td>
                <td>Widget Three</td>
                <td>Widget Four</td>
                <td>Widget Five</td>
            </tr>
            <tbody id="compareTableBody">
                <tr>
                    <td class="ch">Feature One</td>
                    <td class="uch">Feature One</td>
                    <td class="uch">Feature One</td>
                    <td class="ch">Feature One</td>
                    <td class="uch">Feature One</td>
                </tr>
                <tr>
                    <td class="uch">Feature Two</td>
                    <td class="uch">Feature Two</td>
                    <td class="ch">Feature Two</td>
                    <td class="uch">Feature Two</td>
                    <td class="ch">Feature Two</td>
                </tr>
            </tbody>
        </table>
    </div>

如何让标题行始终固定在顶部？

注意：实际页面当然比上面更多，这里是截图：

另外，如果您想查看实际的完整页面本身，click here。

【问题讨论】：

标签： html css html-table

【解决方案1】：

创建一个类来锁定表头：

.locked {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
}

使用jQuery在表头到达窗口顶部时添加该类，不在顶部时将其删除。

var lockOffset = $('.compareTableHead').offset().top;

$(window).scroll(function(){
  var locked = $('.compareTableHead'),
      scroll = $(window).scrollTop();

  if (scroll >= lockOffset) locked.addClass('locked');
  else locked.removeClass('locked');
});

向.locked 添加一些额外的 CSS 规则以确保其正确显示：

.locked {
 ...
  display: table; // this ensures the table head spans full width of window
  padding: 0 8px; // to keep alignment with unfixed table head
  box-sizing: border-box; 
}

CODEPEN

片段

var lockOffset = $('.compareTableHead').offset().top;

$(window).scroll(function() {
  var locked = $('.compareTableHead'),
    scroll = $(window).scrollTop();

  if (scroll >= lockOffset) locked.addClass('locked');
  else locked.removeClass('locked');
});

table {
  width: 100%;
  font-family: sans-serif;
}
table tr td {
  padding: 20px;
}
.compareTableHead td {
  font-weight: bold;
  text-transform: uppercase;
  background-color: lightblue;
  color: white;
}
.locked {
  position: fixed;
  top: 0;
  right: 0;
  margin: auto;
  width: 100%;
  display: table;
  padding: 0 8px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="randomText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem minima ad delectus nostrum dolor, maiores voluptates, repellat cupiditate officiis, libero modi. Corporis voluptatem incidunt consequuntur cupiditate a error reprehenderit. Accusantium!
  <br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique quis quod quos eaque nobis rerum sequi voluptate tempore harum fuga? Est laudantium nobis nam ad at! Repellendus officia minus ipsam.</div>
<div>

  <table id="compareTable">
    <tr class="compareTableHead" id="compareHead">
      <td>Widget One</td>
      <td>Widget Two</td>
      <td>Widget Three</td>
      <td>Widget Four</td>
      <td>Widget Five</td>
    </tr>
    <tbody id="compareTableBody">
      <tr>
        <td class="ch">Feature One</td>
        <td class="uch">Feature One</td>
        <td class="uch">Feature One</td>
        <td class="ch">Feature One</td>
        <td class="uch">Feature One</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
      <tr>
        <td class="uch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
        <td class="uch">Feature Two</td>
        <td class="ch">Feature Two</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

这看起来像解决方案，我会回来查看。

【解决方案2】：

尝试使用this JS插件来达到这个效果。你可以看到大量的演示如何使用它。

【讨论】：

他们称之为“互联网爆炸者”哈哈

【解决方案3】：

添加样式属性 position:fixed 到元素。

【讨论】：

【解决方案4】：

类似的东西

$(window).scroll(function(){ 

var a = 112;
var pos = $(window).scrollTop();
if(pos > a) {
    $("#compareHead").css({
                position: 'fixed',
                top: '51px'
            });
}
});

【讨论】：

只有通过这个一起，如果你喜欢我可以让一些更干净的东西。

【解决方案5】：

试试这个

#compareHead{
    position: fixed;
}

【讨论】：

为什么 OP 应该尝试这个？
对不起。我不明白
如果他们解释他们的解决方案，答案会更好，也许链接到文档。 试试这个不会教给未来的访客任何东西。