<table>
  <thead>
    <tr>
      <th>Header1</th>
       . . . 
    </tr>
   </thead>
   <tbody style="height: 300px; overflow-y: auto"> 
     <tr>
       . . .
     </tr>
     . . .
   </tbody>
 </table>

如果＆lt; tbody＆gt;内容长度高于所需的高度，它将开始滚动。但是，无论滚动位置如何，标题都将保持固定在顶部。

Answer 6

在这个答案中，我发现你的问题也是最好的答案：

HTML table with fixed headers?

并基于纯CSS 。

Answer 7

我创建了一些具有固定标题，固定页脚，固定左列和固定右列的内容。这只适用于IE。由于大多数用户仍在使用IE，这可能会有所帮助。请在Scrollable Table中找到此处的代码。请告诉我你的建议。

与此同时，我正在努力修复其他浏览器中的列。我会及时向大家发布。： - ）

Answer 8

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

Answer 9

不完美，但它让我比这里的一些最佳答案更接近。

两个不同的表，一个带有标题，另一个用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>

Answer 10

我知道你可以do it for MSIE和this limited example似乎适用于firefox（不确定该技术的可扩展性）。

Answer 11

第一列在标题正下方的单元格上有一个滚动条

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

Answer 12

YUI DataTable

我不知道YUI DT是否具有此功能，但如果确实如此，我不会感到惊讶。

Answer 13

这是一个很好的jQuery插件，适用于所有浏览器！

你有一个固定的标题表而没有固定它的宽度。

检查：https://github.com/benjaminleouzon/tablefixedheader

免责声明：我是该插件的作者。

带有固定标题和固定列的HTML表格？

13 个答案: