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>

我想要的是标题行始终位于事件窗口的顶部，即向下滚动时的第一行，因为我的行下降了很多。我想使标签中的产品名称始终可见，以便用户可以始终将内容与最上面一行中的不同产品相关联。

先感谢您!

最佳答案

我的简单技术是将 header 行与实际数据放在单独的table中。
将此 header 表设置为fixed的位置，然后在下面的表(包含结果)中将margin-top设置为 header 表的height。

这将产生标题保持在原处以及表滚动的效果。

此处是一个基本示例:http://jsfiddle.net/zKDR4/2/

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

编辑

正如安德斯(Anders)所述，如果按照我的建议路线行驶，则需要设置th和td元素的宽度。否则，由于它们是单独的表，因此它们将不匹配。

关于html - 滚动时将标题元素始终放在顶部吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8972643/