jquery - 可滚动 Div 内带有固定标题的大型 HTML 表。如何？

这个问题困扰我有一段时间了。

以下是同一页面中的两个固定标题 html 表格:

站点 1

但是，这两个表格位于页面本身上..但不是单独位于可滚动 div 中。

我的意思是..它不是这样的:

站点 2

http://www.matts411.com/static/demos/grid/index.html

(实际上我可以在同一页面上放置两个这样的表格..并且标题将很好地保留在这些 div 中..当滚动右左上或下时)。

或者，这个

站点 3

http://www.tablefixedheader.com/demonstration/

好的..如何在站点 1(使用数据表)中实现与站点 2(网格演示)上看到的相同效果。

我想使用标准的简单库，如.. jquery、jqueryui、jquery mobile、bootstrap、datatable来实现我的需要..在同一页面上有多个表...每个表都可以自己滚动..宽度和高度...在页面中。我不想使用网络上某个随机页面中的库...将来可能不会有任何支持。

示例:

html 页面开始...

表 1...假设有 50 列...和 500 行...(以 400 像素 x 300 像素的可滚动 div 和固定标题显示)

在上表的正下方几行之后...是...

表 2...假设有 30 列...和 400 行...(以 400 像素 x 300 像素的可滚动 div 和固定标题显示)

结束 html 页面

我确实尝试过站点 2..但是使用 bootstrap 来处理带有该网格的样式..破坏了页面..并且样式与 bootstrap 不匹配。

最佳答案

还有一个pure CSS solution那里(有一些优点和缺点)涉及包装 <th> div 中的内容设置为position: absolute .

关于jquery - 可滚动 Div 内带有固定标题的大型 HTML 表。如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22093319/