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

Question

我已经阅读了很多关于这个主题的文章并试图实现一些,但我似乎无法做到正确.我有一个简单的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>

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

先感谢您!

Answer 1

我简单的技术是将标题行table与实际数据分开.这个头表被设置为具有它的位置fixed,然后保存结果的下面的表已经margin-top设置height了头表.

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

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

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

编辑

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