只冻结html表格的顶部行(固定表格标题滚动)

我想做一个顶部行冻结的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/

你不会有效地把这个closures没有JavaScript …特别是如果你想跨浏览器支持。

你有任何方法都有一些变化,特别是关于跨浏览器/版本的支持。

编辑:

即使不是你想要修正的头,但是第一行数据,这个概念还是一样的。 我不是你所指的100%。

额外的想法,我的任务是由我的公司研究这个可以在IE7 +,Firefox和Chrome中运行的解决scheme。

经过许多寻找,尝试和挫折之后,这真是一个根本性的问题。 大多数情况下,为了获得固定的头文件,需要实现固定的高度/宽度列,因为大多数解决scheme涉及到使用两个单独的表,一个用于浮动并保持在包含数据的第二个表。

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

有些尝试的另一种方法是利用tbody和thead标签,但也有缺陷,因为IE不允许你在滚动条上放置一个滚动条,这意味着你不能限制其高度(如此愚蠢的海事组织)。

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

这种方法有很多问题,例如确保EXACT像素宽度,因为表格非常可爱,因为不同的浏览器会根据计算的不同来分配不同的像素,而且您可以简单的使用CAN NOT(AFAIK)来保证在任何情况下的分布都是完美的。 如果你的桌子内有边界,这变得非常明显。

我采取了不同的方法,并说螺丝表,因为你不能做这个保证。 我用div来模仿表格。 这也有定位行和列的问题(主要是因为浮动有问题,使用内嵌块将无法工作的IE7,所以它真的离开我使用绝对定位把他们在适当的地方)。

有人在那里做出了与我的非常相似的方法的光滑网格,你可以使用和一个很好的(虽然复杂)的例子来实现这一点。

https://github.com/6pac/SlickGrid/wiki

根据带有固定头文件的Pure CSS Scrollable Table ,我写了一个DEMO来通过设置overflow:auto来轻松修复头文件。

 table thead tr{ display:block; } table th,table td{ width:100px;//fixed width } table tbody{ display:block; height:200px; overflow:auto;//set tbody to auto } 

我关心的不是固定宽度的单元格。 这在任何情况下似乎都不起作用。 我发现这个解决scheme似乎是我所需要的。 我在这里发布给正在寻找方法的其他人。 看看这个 小提琴

可以使用position:fixed<th><th>是最上面一行)。

这是一个例子

你可以使用两个div一个标题,另一个表格。 然后使用

 #headings { position: fixed; top: 0px; width: 960px; } 

因为@ ptriek说这只适用于固定宽度的列。

Chromatable的jQuery插件允许一个固定的头(或顶行)的宽度,允许百分比 – 授予,只有100%的百分比。

http://www.chromaloop.com/posts/chromatable-jquery-plugin

我想不出如何不用JavaScript来做到这一点。

更新:新链接 – > http://www.jquery-plugins.info/chromatable-00012248.htm

我使用这个:

 tbody{ overflow-y: auto; height: 350px; width: 102%; } thead,tbody{ display: block; } 

我用bootstrap css col-md-xx来定义列的宽度。 没有定义列的宽度,自动宽度不匹配。 百分之102的是因为你失去了一些溢出物

使用CSS斑马造型

复制粘贴这个例子,看到固定的头。

  <style> .zebra tr:nth-child(odd){ background:white; color:black; } .zebra tr:nth-child(even){ background: grey; color:black; } .zebra tr:nth-child(1) { background:black; color:yellow; position: fixed; margin:-30px 0px 0px 0px; } </style> <DIV id= "stripped_div" class= "zebra" style = " border:solid 1px red; height:15px; width:200px; overflow-x:none; overflow-y:scroll; padding:30px 0px 0px 0px;" > <table> <tr > <td>Name:</td> <td>Age:</td> </tr> <tr > <td>Peter</td> <td>10</td> </tr> </table> </DIV> 

请注意,div中的30px的顶部填充留下了被剥离数据的第一行使用的空间,即tr:nth-​​child(1)是“固定位置”并格式化为-30px的页边距