2

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

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

站点 1

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

但是，这两个表在页面本身上.. 但不是单独在一个可滚动的 div 中。

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

站点 2

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

（实际上，我可以在同一页面上拥有 2 个这样的表格。当向右左上角或右下角滚动时，标题会很好地保留在这些 div 中。）。

或这个

站点 3

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

--

好的..我怎样才能在站点 2（网格演示）上看到与站点 1（使用数据表）相同的效果。

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

例子：

html页面开始...

表 1... 说 50 列.. 和 500 行.. （以 400 像素 x 300 像素的可滚动 div 和固定标题显示）

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

表 2... 说 30 列.. 和 400 行.. （以 400px x 300px 可滚动 div 和固定标题显示）

结束html页面

--

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

4

2 回答 2

4

还有一个纯 CSS 解决方案（有一些优点和缺点），它涉及将集合中的<th>内容包装为.divposition: absolute

于 2014-09-09T03:21:41.043 回答
0

您可以采用简单明了的方式将标题放在一个 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();
}

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

于 2014-02-28T14:19:10.933 回答