冻结顶部的行仅用于html表（固定表头滚动） [英] Freeze the top row for an html table only (Fixed Table Header Scrolling)

问题描述

我想创建一个html表，顶部的行冻结（所以当你向下滚动，你总是可以看到它）。

有没有一个聪明的方法，使这个发生没有javascript？

注意，我不需要左柱冷冻。

解决方案

这称为固定标题滚动。有一些记录的方法：

http：// www .imaputz.com / cssStuff / bigFourVersion.html

http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/

http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8- firefox-35-chrome /

您不会在没有JavaScript的情况下有效地将其关闭...特别是如果您需要跨浏览器支持。

有许多方法，特别是跨浏览器/版本支持。

编辑：

即使它不是你要修复的头，但是第一行数据，概念仍然是一样的。

其他想法
我被我的公司委托研究一个解决方案这可以在IE7 +，Firefox和Chrome中运行。

经过许多搜索，尝试和沮丧之后，它真的归结为一个根本问题。在大多数情况下，为了获得固定的头，你需要实现固定的高度/宽度列，因为大多数解决方案涉及使用两个单独的表，一个用于头，将漂浮和保持在包含数据的第二个表。

  //将这一个浮在第二个表上
< table> 
< tr> 
< th>标题1< / th> 
< th>标题2< / th> 
< / tr> 
< / table> 
 
< table> 
 // Data 
< / table> 
 

另一种方法有一些尝试是利用tbody和thead标签，但这是有缺陷的，因为IE不会允许你在tbody上放置一个滚动条，这意味着你不能限制它的高度（所以蠢的IMO）。

 < table> ; 
< thead style =do some stuff to fix its position> 
< tr> 
< th>标题1< / th> 
< th>标题2< / th> 
< / tr> 
< / thead> 
< tbody style =此处不允许滚动！> 
数据在这里
< / tbody> 
< / table> 
 

这种方法有许多问题，如确保EXACT像素宽度，因为表非常可爱，不同的浏览器基于计算不同地分配像素，你只是不能（AFAIK）保证分布将在所有情况下完美。

我采取了不同的方法，说螺丝表，因为你不能保证。我使用divs模仿表。这也有定位行和列的问题（主要是因为浮动有问题，使用在线块将不工作的IE7，所以它真的让我使用绝对定位将它们放在适当的位置）。

有人在那里做了Slick Grid，它有一个非常相似的方法，我可以使用和一个很好的（虽然复杂的）例子来实现这一点。

https://github.com/mleibman/SlickGrid/wiki p>

I want to make an html table with the top row frozen (so when you scroll down vertically you can always see it).

Is there a clever way to make this happen without javascript?

Note that I do NOT need the left column frozen.

解决方案

This is called Fixed Header Scrolling. There are a number of documented approaches:

http://www.imaputz.com/cssStuff/bigFourVersion.html

http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/

http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/

You won't effectively pull this off without javascript ... especially if you want cross browser support.

There are a number of gotchyas with any approach you take, especially concerning cross browser/version support.

Edit:

Even if it's not the header you want to fix, but the first row of data, the concept is still the same. I wasn't 100% which you were referring to.

Additional thought I was tasked by my company to research a solution for this that could function in IE7+, Firefox, and Chrome.

After many moons of searching, trying, and frustration it really boiled down to a fundamental problem. For the most part, in order to gain the fixed header, you need to implement fixed height/width columns because most solutions involve using two separate tables, one for the header which will float and stay in place over the second table that contains the data.

//float this one right over second table
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</table>

<table>
//Data
</table>

An alternative approach some try is utilize the tbody and thead tags but that is flawed too because IE will not allow you put a scrollbar on the tbody which means you can't limit its height (so stupid IMO).

<table>
  <thead style="do some stuff to fix its position">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  </thead>
  <tbody style="No scrolling allowed here!">
     Data here
  </tbody>
</table>

This approach has many issues such as ensures EXACT pixel widths because tables are so cute in that different browsers will allocate pixels differently based on calculations and you simply CANNOT (AFAIK) guarantee that the distribution will be perfect in all cases. It becomes glaringly obvious if you have borders within your table.

I took a different approach and said screw tables since you can't make this guarantee. I used divs to mimic tables. This also has issues of positioning the rows and columns (mainly because floating has issues, using in-line block won't work for IE7, so it really left me with using absolute positioning to put them in their proper places).

There is someone out there that made the Slick Grid which has a very similar approach to mine and you can use and a good (albeit complex) example for achieving this.

https://github.com/mleibman/SlickGrid/wiki

这篇关于冻结顶部的行仅用于html表（固定表头滚动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！