Question

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

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

网站1

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

但是，这两个表位于页面本身上..但不能单独使用可滚动的div。

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

网站2

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

（实际上我可以在同一页面上有两个这样的表..并且标题将在这些div中保持良好状态..当向左或向上滚动时左右）。

或者，这个

网站3

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

-

好的..如何在Site 2（Grid Demo）上看到的Site 1（使用数据表）实现相同的效果。

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

示例：

html页面开始...

表1 ...说50列..和500行..（显示在带有固定标题的400px x 300px可滚动div中）

几行之后

正好在上面的表格......是......

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

结束HTML页面

-

我确实尝试过Site 2 ..但是对于带有该网格的样式使用bootstrap ...打破了页面..并且样式与bootstrap不匹配。

Answer 1

那里还有一个pure CSS solution（有一些专家和骗子）涉及将<th>内容包装在div集中到position: absolute。

Answer 2

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

您还可以使用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();
}

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

可滚动Div中具有固定标头的大型HTML表格。怎么样？

2 个答案: