Large HTML Table with Fixed Header inside Scrollable Div. How?

Question

This problem has been bothering me for a while.

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

Site 1

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.

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

Site 2

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

OR, this

Site 3

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

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.

Example:

html page starts...

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

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

end html page

--

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

Answer 1

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.

Answer 2

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

You can also write a quick function doing this for you with 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