jQuery 可滚动 Div 内带有固定标题的大型 HTML 表格。如何？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22093319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Large HTML Table with Fixed Header inside Scrollable Div. How?
提问by ihightower
This problem has been bothering me for a while.
这个问题困扰了我一段时间。
Here are two fixed header html tables in the same page:
这是同一页面中的两个固定标题 html 表：
Site 1
站点 1
https://datatables.net/release-datatables/extras/FixedHeader/two_tables.html
https://datatables.net/release-datatables/extras/FixedHeader/two_tables.html
But, these 2 tables are on the page itself.. but not separately with in a scrollable div.
但是，这 2 个表在页面本身上......但不是在可滚动的 div 中分开。
What I mean is.. it is not something like this:
我的意思是......它不是这样的：
Site 2
站点 2
http://www.matts411.com/static/demos/grid/index.html
http://www.matts411.com/static/demos/grid/index.html
(actually I can have 2 of these tables on the same page.. and the headers will stay nicely with in those divs.. when scroll right left top or bottom).
（实际上，我可以在同一页面上有 2 个这样的表格......并且标题将很好地保留在这些 div 中......当滚动到左上角或右下角时）。
OR, this
或这个
Site 3
站点 3
http://www.tablefixedheader.com/demonstration/
http://www.tablefixedheader.com/demonstration/
--
——
Ok.. how can I achieve the same effect with Site 1 (using datatable) of what I can see on Site 2 (Grid Demo).
好的..我如何才能在站点 2（网格演示）上看到的站点 1（使用数据表）实现相同的效果。
I want to use standard easy libraries like.. jquery, jqueryui, jquery mobile, bootstrap, datatable to achieve my need.. of having multiple tables on the same page... each of it can scroll on its own.. width and height... with in the page. I don't wish to use libraries from some random page on the net... which may not have any support in the future.
我想使用标准的简单库，如.. jquery、jqueryui、jquery mobile、bootstrap、datatable 来满足我的需要.. 在同一页面上有多个表......每个表都可以自己滚动......宽度和高度...在页面中。我不希望使用网络上某个随机页面中的库......将来可能没有任何支持。
Example:
例子：
html page starts...
html页面开始...
Table 1... say 50 columns.. and 500 rows.. (displayed with in 400px x 300px scrollable div with fixed headers)
表 1... 说 50 列.. 和 500 行..（显示在 400px x 300px 可滚动 div 和固定标题）
and right below above table after few lines... is...
就在表格上方几行之后......是......
Table 2... say 30 columns.. and 400 rows.. (displayed with in 400px x 300px scrollable div with fixed headers)
表 2... 说 30 列.. 和 400 行..（显示在 400px x 300px 可滚动 div 和固定标题）
end html page
结束 html 页面
--
——
I did try Site 2.. but using bootstrap for styles with that grid.. broke the page.. and the styles were not matched to bootstrap.
我确实尝试过 Site 2 .. 但是使用 bootstrap 来处理带有该网格的样式.. 破坏了页面.. 并且样式与 bootstrap 不匹配。
回答by Clint Brown
There's also a pure CSS solutionout there (with some pro's and con's) that involves wrapping the <th>contents in a divset to position: absolute.
还有一个纯 CSS 解决方案（有一些优点和缺点），它涉及将<th>内容包装div到position: absolute.
回答by Grishka
You can go with easy and obvious way of putting headers in one DIV, and then the rows in another div. The div containing rows would have fixed height and overflow set to scroll/auto
您可以采用简单明了的方式将标题放在一个 DIV 中，然后将行放在另一个 div 中。包含行的 div 将具有固定的高度和溢出设置为滚动/自动
You can also write a quick function doing this for you with jQuery
您还可以使用 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();
}
it's of course not complete solution and just one of many ways - but I guess it will give you food for though
这当然不是完整的解决方案，只是众多方法中的一种 - 但我想它会给你食物
