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

Question

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

这是同一页面中的两个固定标题html表：

网站 1

https://datatables.net/release-datatables/extras/FixedHeader/two_tables.html

但是，这 2 个表在页面本身上.. 但不是在可滚动的 div 中分开。

我的意思是..不是这样的：

站点 2

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

（实际上，我可以在同一页面上拥有 2 个这样的表格......并且标题会很好地保留在这些 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页面

--

我确实尝试过 Site 2.. 但是使用引导程序来获取具有该网格的样式.. 破坏了页面.. 并且样式与引导程序不匹配。

Answer 1

您可以采用简单明了的方式将标题放在一个 DIV 中，然后将行放在另一个 div 中。包含行的 div 将具有固定高度和溢出设置为滚动/自动

您也可以使用 jQuery 为您编写一个快速函数

function fixedHeader(table)
{
    var header = table.find("thead").html();
    var body = table.find("body").html();
    // add <table> tags to both header and body or the containers
    $("#yourHeaderContainer").html(header);
    $("#yourContentContainer").html(body);
    table.hide();
}

这当然不是完整的解决方案，只是众多方法中的一种 - 但我想它会给你食物

Answer 2

还有一个pure CSS solution（有一些优点和缺点），涉及将<th> 内容包装在div 设置为position: absolute。