在滚动时保持标题元素始终在顶部？ [英] Keeping header element always on top when scrolling?

问题描述

我已经阅读了许多关于这个主题的文章，并尝试实施一些，但我似乎不能得到它的权利。我有一个简单的HTML表格，它比较产品：

 < table& 
< tr> 
< th>产品：< / th> 
< th>产品1< / th> 
< th>产品2< / th> 
< th>产品3< / th> 
< / tr> 
< tr> 
< td>功能< / td> 
< td>产品1功能< / td> 
< td>产品2功能< / td> 
< td>产品3功能< / td> 
< / tr> 
，所以列表继续... 
< / table> 
  

我想要的是标题行总是在活动窗口的顶部，当我向下滚动时，顶行，因为我的行下来相当远。我想保留标签中的产品名称始终可见，以便用户可以始终将内容与顶行中的不同产品相关联。

谢谢

我的简单的技巧是让标题行在一个单独的表中从实际数据。
这个头表设置为它的位置为 fixed ，然后下面的表保存结果，它的 margin-

这将创建标题表的 height

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

您还可以使用jQuery插件创建固定标题。看看这一个 http://fixedheadertable.com/ 实现起来非常简单。

编辑

正如Anders所说，如果你沿着我的建议路线，你需要设置元素的宽度 th 和 td 。否则，它们将不匹配，因为它们是单独的表。

I've read numerous articles on this topic and tried implementing a few, but I just can't seem to get it right. I have a simple HTML table, which compares products:

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

What I want is for the header row to always be on top of the active window, that is the top row when I scroll down, since my rows go down quite far. I want to keep the product names in the tags always visible so that a user can relate the content to the different products in the very top row all the time.

Thank you in advance!

解决方案

I simple technique is to have the header row in a separate table from the actual data. This header table is set to have it's position as fixed, and then the table below, which holds the results, has it's margin-top set the height of the header table.

This creates the effect of the header staying where it is and the table scrolling.

A basic example here: http://jsfiddle.net/zKDR4/2/

You can also create a fixed header with jQuery plugins. Take a look at this one http://fixedheadertable.com/ really simple to implement.

Edit

As Anders has mentioned, if you go down my suggested route, you will need to set the widths of the th and td elements. Otherwise they would not match up since they are separate tables.

这篇关于在滚动时保持标题元素始终在顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！