61

是否有 CSS/JavaScript 技术来显示一个长 HTML 表格，以便列标题在屏幕上保持固定，第一列保持固定并随数据滚动。

我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列。

如果有一个jQuery插件那就太好了！如果它有帮助，我唯一关心的浏览器就是 Firefox。

4

13 回答 13

19

pranav 发布的链接的工作示例：

http://jsbin.com/nolanole/1/edit?html,js,输出

仅供参考：在 IE 6、7 和 8（打开或关闭兼容模式）、FF 3 和 3.5、Chrome 2 中测试。不适合屏幕阅读器（标题不是内容表的一部分）。

编辑 5/5/14：将示例移至 jsBin。这是旧的，但令人惊讶的是，在当前的 Chrome、IE 和 Firefox 中仍然有效（尽管 IE 和 Firefox 可能需要对行高进行一些调整）。

于 2009-08-20T15:27:37.063 回答
3

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）

于 2013-07-13T18:41:24.527 回答
2

你可能正在寻找这个。

虽然它有一些已知问题。

于 2009-04-03T15:05:04.347 回答
2

我看到这虽然是一个老问题，但却是插入我自己的脚本的好地方：

http://code.google.com/p/js-scroll-table-header/

它无需配置即可工作，并且非常易于设置。

于 2010-08-13T14:43:39.680 回答
1

如果您想要在表格中的数据垂直滚动时保持标题不变，您应该实现一个样式为“overflow-y：auto”的 <tbody> ，如下所示：

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

如果 <tbody> 内容长于所需高度，它将开始滚动。但是，无论滚动位置如何，标题都将固定在顶部。

于 2009-03-26T05:40:09.673 回答
1

在这个答案中，我还找到了对您的问题的最佳答案：

带有固定标题的 HTML 表格？

并基于纯 CSS。

于 2010-08-24T17:21:47.307 回答
0 
<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>
于 2011-10-28T18:37:55.787 回答
0

不是很完美，但它让我比这里的一些顶级答案更接近。

两个不同的表，一个带有标题，另一个用 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>
于 2012-02-27T04:05:35.923 回答
0

我创建了具有固定页眉、固定页脚、固定左列和固定右列的东西。这只能在 IE 中正常工作。由于大多数用户仍在使用 IE，这可能会有所帮助。请在Scrollable Table中找到代码。请告诉我你的建议。

同时我正在努力修复其他浏览器中的列。我会及时向大家发布。:-)

于 2010-09-29T20:30:24.190 回答
-2

我知道你可以为 MSIE 做到这一点，这个有限的例子似乎适用于 firefox（不确定该技术的可扩展性）。

于 2009-03-26T01:45:54.447 回答
-2

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

<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>
于 2009-03-26T02:00:50.107 回答
-2

YUI DataTable

I don't know if YUI DT has this feature but I won't be surprised if it does.

于 2009-03-26T09:46:17.833 回答
-3

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

您有一个固定的标题表，但没有固定其宽度。

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

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

于 2010-08-23T07:44:17.227 回答