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

Question

有没有CSS/JavaScript技术可以显示一个长的HTML表格，让列头固定在屏幕上，第一列与数据一起滚动。

我想要能够滚动表格的内容，但是始终能够看到顶部的列头和左侧的第一列。

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

- koogunmo

---

部分重复：https://dev59.com/YnRB5IYBdhLWcg3wSVYI - Crescent Fresh

这个问题似乎不是重复的，因为它需要固定列。 - Selvakumar Arumugam

出于原则，我投票支持重新开放这个问题。显然有人认为它很有用，获得了数十个赞和收藏。是的，它需要一个长回答，但这就是 jfiddle 和其他类似工具存在的原因。 - TheLettuceMaster

@KickingLettuce的受欢迎程度并不等同于话题的相关性。如果问题重新开放，它只会再次被关闭。 - TylerH

谷歌在我的第一次搜索中带我来到这个问题，但答案已经过时且不太令人满意。最终我在这里找到了答案：https://dev59.com/jGUo5IYBdhLWcg3wvBeX#50516259 - Aberrant

我不明白为什么这个问题被关闭。问题已经清晰定义。这个问题应该接受用更现代的技术回答的答案。 - Xavier Poinas

Answer 1

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

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

提示：在IE 6、7和8（无论兼容模式是否开启）、FF 3和3.5、Chrome 2中进行了测试。不适合屏幕阅读器用户（标题不是内容表的一部分）。

编辑于5/5/14：将示例移动到jsBin。虽然IE和Firefox可能需要调整行高，但仍然可以在当前版本的Chrome、IE和Firefox中使用。

- acatalept

---

在我的WinXP IE8或FF3.6上无法工作。 - allyourcode

jQuery库在jQuery.com上托管的链接已更改，而且重定向不正确...因此在所有浏览器中都无法正常工作。我已经修复了链接，将其指向Google服务器上的文件-希望那个更可靠。 - acatalept

谢谢。这对我帮助很大。我不得不修改代码，使用setTimeout()来使它适用于更大的表格，但这是一个很好的例子。 - Robert Van Hoose

Answer 2

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）

- mg1075

---

注意：根据我的经验（如果我错了请纠正），只有当所有表格单元格的colSpan和rowSpan都等于1时，它才能正常工作。 - J. Ed

Answer 3

虽然这是一个很老的问题，但我认为这是一个很好的地方来推销我的脚本：

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

它可以在不需要任何配置的情况下工作，并且非常容易设置。

- raveren

---

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

Answer 4

在这个答案中，我也找到了你问题的最佳答案：

HTML表格固定标题？

并且基于纯CSS。

- Marco Demaio

Answer 5

如果您想让表格的标题在垂直滚动时保持不变，您应该实现一个带有"overflow-y: auto"样式的，如下所示：

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

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

- levik

---

谢谢，这有助于固定标题部分，但固定列怎么办？ - koogunmo

overflow-y 是微软浏览器（Internet Explorer 或 Microsoft Edge）特有的属性。你需要使用普通的 overflow:auto 来替代。 - Thomas Ahle

@levik说，在标准模式下，至少在使用HTML 5 DOCTYPE的几乎所有浏览器中都不能正常工作。 - Marco Demaio

这无法工作。 - Nathan

完全无法运作！ - Mohammad Dayyan

Answer 6

我创建了一个具有固定页眉、固定页脚、固定左列和固定右列的东西。这只在IE中正常工作。由于大多数用户仍在使用IE，这可能会有所帮助。请在可滚动表格中找到代码。请让我知道您的建议。

同时，我正在努力修复其他浏览器中的列。我会随时向您报告。:-)

- Shahib

---

这不是一个很好的解决方案，因为IE已经停止支持CSS表达式：http://msdn.microsoft.com/en-us/library/cc304082%28VS.85%29.aspx#expressions - Homer

大多数用户仍在使用IE LOL :D - J. Ed

Answer 7

虽然不是完美的解决方案，但比这里一些顶级答案更接近我的需求。

有两个不同的表格，一个带有标题，另一个用内容包装在 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>

- Ascherer

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>

- Pat

---

这个方法能否用于“响应式”列（没有定义固定宽度）？ - Matteo Piazza

Answer 9

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

- MarkusQ

---

第一个链接对我没用。第二个链接现在显示了如何生成固定的第一列。 - allyourcode

答案中的两个链接都已失效。 - Pang

Answer 10

YUI DataTable

我不知道 YUI DT 是否具有这个功能，但如果它确实具备的话，我也不会感到惊讶。

- ksuralta

---

谢谢，我查看了那个。它确实有滚动表格，但只有固定标题，而不是我需要的固定列。http://developer.yahoo.com/yui/examples/datatable/dt_fixedscroll.html - koogunmo

是的，我也在他们的示例清单中没有找到那个。 - allyourcode