具有固定标题和固定列的 HTML 表格？ [关闭]答案

【问题标题】：HTML table with fixed headers and a fixed column? [closed]具有固定标题和固定列的 HTML 表格？ [关闭]
【发布时间】：2010-10-15 14:44:44
【问题描述】：

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

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

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

【问题讨论】：

部分复制：stackoverflow.com/questions/673153/…
看起来不像是重复的，因为这个问题也需要固定列。
出于原则，我投票决定重新提出这个问题。几十个赞和喜欢，显然有人觉得它有用。是的，它需要一个很长的答案。这就是 jfiddle 和其他类似工具的用途。
@KickingLettuce 人气！== 主题。如果问题重新打开，它将再次关闭。
Google 在我第一次搜索时将我带到了这个问题，但答案已经过时并且不太令人满意。我最终在这里找到了答案：stackoverflow.com/a/50516259/982107

标签： javascript html css html-table

【解决方案1】：

link posted by pranav 的工作示例：

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

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

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

【讨论】：

在 winxp ie8 或 ff3.6 中对我不起作用
jQuery.com 上托管的 jQuery 库的链接已更改，并且它们的重定向不正确......因此它在所有浏览器中停止工作。我已将链接修复为指向 Google 服务器上的文件 - 希望该链接更可靠。
谢谢。这对我帮助很大。我不得不修改代码以使用 setTimeout() 来让它与更大的表一起工作，但这是一个很好的例子。

【解决方案2】：

jQuery DataTables plug-in 是实现类似于 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）

【讨论】：

注意：根据我的经验（如果我错了，请纠正我），只有当您的所有表格单元格都具有 colSpan 和 rowSpan = 1 时，它才有效。

【解决方案3】：

您可能正在寻找this。

但它有一些已知问题。

【讨论】：

我如何下载这个解决方案？
同时添加下载链接

【解决方案4】：

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

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

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

【讨论】：

我有一种感觉，当可能有数千行时，为每一行分配唯一的 ID 可能不是最好的解决方案。

【解决方案5】：

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

，如下所示：

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

如果

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

【讨论】：

谢谢，这有助于固定标题部分，但固定列呢？
overflow-y 是特定于 ms 的。您必须使用普通的溢出：自动。
@levik：至少在标准模式下使用 HTML 5 DOCTYPE 在几乎所有浏览器中都不起作用
这不起作用...
根本不行！

【解决方案6】：

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

HTML table with fixed headers?

并基于纯 CSS。

【讨论】：

【解决方案7】：

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

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

【讨论】：

这不是一个很好的解决方案，IE 已经停止支持 CSS 表达式：msdn.microsoft.com/en-us/library/…
"大部分用户还在使用 IE" LOL :D

【解决方案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>

【讨论】：

是否可以将此方法用于“响应式”列（未定义固定宽度）？

【解决方案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>

【讨论】：

【解决方案10】：

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

【讨论】：

第一个链接对我不起作用。第二个现在确实显示了如何生成固定的第一列。
答案中的两个链接都已失效。

【解决方案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>

【讨论】：

我认为您误解了所问的内容。我们希望能够滚动到（大）表格中的不同单元格。

【解决方案12】：

YUI DataTable

我不知道 YUI DT 是否有这个功能，但如果有，我不会感到惊讶。

【讨论】：

谢谢，我看了一下。它确实有一个滚动表，但它确实有一个固定的标题，但没有我需要的固定列。 developer.yahoo.com/yui/examples/datatable/dt_fixedscroll.html
是的，我在他们的示例列表中也找不到。

【解决方案13】：

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

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

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

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

【讨论】：

猜猜，这里正确的网址应该是fixedheadertable.com