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.

Laocoon

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.

Tetanus

Answer 2

So I just spent quite some time trying to solve this and figured out an exceptionally easy solution that requires no plugins or anything.

On my page, I am using draggable div containers that can be dynamically removed or added, each containing different datatables, but this will work for "normal" static divs aswell.

For the datatables themselves, set scrollY:false (i do recommend setting scrollcollapse:true though).

For the parent div(s) containing the datatable(s) set overflow-y:scroll.

Then set the following css for the parent containers id (or class if you have many):

.parentdivclass th {
    position:sticky;
    top:0px;
    background-color:white; /* or whatever color it should be */
}

Position sticky will always "stick" the selected elements relative to its direct, scrollable parent. You have to define either of top, left, right, bottom to tell it to which side of the parent it should stick to (so this should work for horizontal scrolling aswell).

The background color is needed because otherwise you would see tbody contents scrolling behind the header.

Antichrist

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review – Response

Answer 3

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

Elbe

I don't really know how to implement above.. but anyway i will try and if success i will update here again. I actually hope for a standard technique using the plugins directly instead of cooking one up myself. thank you in any case. – Laocoon

tablescroll is even least helpful.. no good documentation. scrollwidth is no where to be found. scroll height works at basic level so far. Overall not a great thing to see. I am currently fighting with the datatables.net approach.. it works better.. not 100%.. i don't know if it is due to bugs, or the feature is incomplete.. or i am doing it wrong.. I will share the details soon here. – Laocoon