只冻结html表格的顶部行（固定表格标题滚动）
我想做一个顶部行冻结的HTML表（所以当你垂直向下滚动，你总是可以看到它）。
有没有一个聪明的方法，使这种情况下没有JavaScript？
请注意，我不需要冻结左列。
这被称为固定标题滚动。 有许多文件记载的方法：
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://rcswebsolutions.wordpress.com/2007/01/02/scrolling-html-table-with-fixed-header/
你不会有效地把这个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，所以它真的离开我使用绝对定位把他们在适当的地方）。
有人在那里做出了与我的非常相似的方法的光滑网格，你可以使用和一个很好的（虽然复杂）的例子来实现这一点。
根据带有固定头文件的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的页边距
