html – 滚动时保持标题元素始终在顶部？

我已经阅读了很多关于这个主题的文章并试图实现一些,但我似乎无法做到正确.我有一个简单的HTML表,它比较了产品：

<table>
  <tr>
    <th>Product:</th>
    <th>Product 1</th>
    <th>Product 2</th>
    <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
    <td>Product 1 features</td>
    <td>Product 2 features</td>
    <td>Product 3 features</td>
   </tr>
   and so the list goes on...
 </table>

我想要的是标题行始终位于活动窗口的顶部,这是我向下滚动时的顶行,因为我的行向下走得很远.我希望标签中的产品名称始终可见,以便用户可以始终将内容与最顶行的不同产品相关联.

先谢谢你！

解决方法

我简单的技术是将标题行放在与实际数据不同的表中.
此标头表设置为固定位置,然后保存结果的下表将margin-top设置为标头表的高度.

这会产生标题保持原样和表格滚动的效果.

这里有一个基本的例子：http://jsfiddle.net/zKDR4/2/

您还可以使用jQuery插件创建固定标头.看看这个http://fixedheadertable.com/真的很容易实现.

编辑

正如Anders所提到的,如果你沿着我建议的路线走下去,你需要设置th和td元素的宽度.否则他们不会匹配,因为他们是单独的表.

原文地址：https://www.jb51.cc/html/231792.html