如何将表格标题固定在HTML表格的顶部？

时间：2017-01-28 18:09:02

标签： html css html-table

我有一个网页，用于比较多个内容的功能，让我们称之为小部件。每个窗口小部件都表示为自己的列，行是窗口小部件的每个可能功能。每个单元格表示每个窗口小部件是否支持该功能。

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

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

这里至少是这个表格如何布局的模型：

    <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>

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

注意：实际页面上的内容当然比上面更多，这里有截图：

Screenshot

另外，如果您希望查看实际的整页，click here。

5 个答案:

答案 0 :(得分：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

<强>段

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

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

  if (scroll >= lockOffset) locked.addClass('locked');
  else locked.removeClass('locked');
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试使用this JS插件来获得该效果。您可以看到大量演示如何使用它。

答案 2 :(得分：0)

添加样式属性位置：固定到元素。

答案 3 :(得分：0)

像这样的东西

open()

答案 4 :(得分：0)

试试这个

#compareHead{
    position: fixed;
}
相关问题
最新问题