带有固定标题和固定列的HTML表？
是否有一个CSS / JavaScript技术来显示一个长的HTML表格，使列标题保持固定在屏幕上，并保持固定的第一个颜色和滚动数据。
我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列。
如果有一个非常棒的jQuery插件！ 如果它有助于我唯一关心的浏览器是Firefox。
pranav发布的链接工作示例：
http://jsbin.com/nolanole/1/edit?html,js,output
FYI：testingIE 6,7和8（兼容模式开启或closures），FF 3和3.5，Chrome 2.不适合屏幕阅读器（标题不是内容表的一部分）。
编辑5/5/14：将示例移到jsBin。 这是旧的，但仍然在当前的Chrome，IE和Firefox中仍然有效（尽pipeIE和Firefox可能需要对行高进行一些调整）。
如果你想要的是让表头中的数据垂直滚动，你应该像这样实现一个带有“overflow-y：auto”风格的<tbody>：
<table> <thead> <tr> <th>Header1</th> . . . </tr> </thead> <tbody style="height: 300px; overflow-y: auto"> <tr> . . . </tr> . . . </tbody> </table> 如果<tbody>的内容长度高于所需的高度，它将开始滚动。 但是，无论滚动位置如何，标题都将固定在顶部。
你可能正在寻找这个 。
它有一些已知的问题，但。
我看到这个，虽然是一个老问题，但是插入我自己的脚本是一个很好的地方：
http://code.google.com/p/js-scroll-table-header/
它只是在没有configuration的情况下工作，并且非常容易设置。
jQuery DataTables插件是实现像excel一样的固定列和标题的绝佳方式。
请注意网站的示例部分和“额外”。
http://datatables.net/examples/
http://datatables.net/extras/
“附加”部分有用于固定列和固定标题的工具。
固定的列
http://datatables.net/extras/fixedcolumns/
（我相信这个页面上的例子是最适合你的问题的例子。）
固定标题
http://datatables.net/extras/fixedheader/
（包括整页电子表格样式布局的示例： http : //datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html ）
在这个答案中，我也发现你的问题是最好的答案：
有固定标题的HTML表格？
并基于纯CSS 。
我创造了一些固定标题，固定页脚，固定左栏和固定右栏的东西。 这在IE中只能正常工作。 由于大多数用户仍在使用IE浏览器，这可能会有帮助。 请在Scrollable Table中find代码。 请让我提出你的build议。
同时我正在修复其他浏览器的列。 我会及时向大家发布。 🙂
<script> $(document).ready(function () { $("#GridHeader table").html($('#<%= GridView1.ClientID %>').html()); $("#GridHeader table tbody .rows").remove(); $('#<%= GridView1.ClientID %> tr:first th').hide(); }); </script> <div id="GridHeader"> <table></table> </div> <div style="overflow: auto; height:400px;"> <asp:GridView ID="GridView1" runat="server" /> </div>
不完美，但它让我更接近这里的一些最好的答案。
两个不同的表，一个带有标题，另一个带有内容的div
<table> <thead> <tr><th>Stuff</th><th>Second Stuff</th></tr> </thead> </table> <div style="height: 600px; overflow: auto;"> <table> <tbody> //Table </tbody> </table> </div>
YUI数据表
我不知道YUI DT是否有这个function，但是如果是的话我不会感到惊讶。
我知道你可以为MSIE做 这个有限的例子似乎工作的Firefox（不知道如何可扩展的技术）。
第一列在标题正下方的单元格上有一个滚动条
<table> <thead> <th> Header 1</th> <th> Header 2</th> <th> Header 3</th> </thead> <tbody> <tr> <td> <div style="width: 50; height:30; overflow-y: scroll"> Tklasdjf alksjf asjdfk jsadfl kajsdl fjasdk fljsaldk fjlksa djflkasjdflkjsadlkf jsakldjfasdjfklasjdflkjasdlkfjaslkdfjasdf </div> </td> <td> Hello world </td> <td> Hello world2 </tr> </tbody> </table>
这里有一个很好的jQuery插件，可以在所有浏览器中使用！
你有一个固定的表头没有固定它的宽度。
检查它： https ： //github.com/benjaminleouzon/tablefixedheader
免责声明：我是该插件的作者。
