具有固定标题和固定列的 HTML 表格？ [关闭]
Posted
技术标签:
【中文标题】具有固定标题和固定列的 HTML 表格？ [关闭]【英文标题】：HTML table with fixed headers and a fixed column? [closed] 【发布时间】：2010-10-15 14:44:44 【问题描述】：是否有 CSS/javascript 技术来显示一个长的 html 表格，以便列标题在屏幕上保持固定，第一列保持固定并随着数据滚动。
我希望能够滚动浏览表格的内容，但始终能够看到顶部的列标题和左侧的第一列。
如果有 jQuery 插件那就太好了！如果它有帮助，我唯一关心的浏览器就是 Firefox。
【问题讨论】：
部分复制：***.com/questions/673153/… 看起来不像是重复的，因为这个问题也需要固定列。 出于原则，我投票决定重新提出这个问题。几十个赞和喜欢，显然有人觉得它有用。是的，它需要一个很长的答案。这就是 jfiddle 和其他类似工具的用途。 @KickingLettuce 人气！== 主题。如果问题重新打开，它将再次关闭。 Google 在我第一次搜索时将我带到了这个问题，但答案已经过时并且不太令人满意。我最终在这里找到了答案：***.com/a/50516259/982107 【参考方案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以上是关于具有固定标题和固定列的 HTML 表格？ [关闭]的主要内容，如果未能解决你的问题，请参考以下文章