在可滚动Div内有固定标题的大HTML表。怎么样？ [英] Large HTML Table with Fixed Header inside Scrollable Div. How?

问题描述

这个问题困扰了我一会儿。

This problem has been bothering me for a while.

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

Here are 2 fixed header html tables in the same page:

网站1

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

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

But, these 2 tables are on the page itself.. but not separately with in a scrollable div.

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

What I mean is.. it is not something like this:

网站2

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

（实际上，我可以在同一页上有两个这些表..和标题将保持良好的在这些div ..当向右滚动左上角或底部）。

(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).

OR，此

网站3

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

-

好吧..我如何实现与网站1（使用datatable）我可以看到在网站2（网格演示）相同的效果。

Ok.. how can I achieve the same effect with Site 1 (using datatable) of what I can see on Site 2 (Grid Demo).

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

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.

示例：

html页开始...

html page starts...

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

Table 1... say 50 columns.. and 500 rows.. (displayed with in 400px x 300px scrollable div with fixed headers)

右下方几行之后的表格...是...

and right below above table after few lines... is...

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

Table 2... say 30 columns.. and 400 rows.. (displayed with in 400px x 300px scrollable div with fixed headers)

结束html页

-

我试过Site 2 ..但是使用bootstrap页面..和样式与引导程序不匹配。

I did try Site 2.. but using bootstrap for styles with that grid.. broke the page.. and the styles were not matched to bootstrap.

推荐答案

还有一个纯CSS解决方案（有一些pro和con的）涉及到包装< th> div 中的内容设置为 position：absolute 。

There's also a pure CSS solution out there (with some pro's and con's) that involves wrapping the <th> contents in a div set to position: absolute.

这篇关于在可滚动Div内有固定标题的大HTML表。怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！