html - 滚动时保持标题元素始终位于顶部？

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 插件创建固定 header 。看看这个http://fixedheadertable.com/实现起来非常简单。

编辑

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