2

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
ihightower
  • 3,093
  • 6
  • 34
  • 49

2 Answers2

4

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.

0

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

Grishka
  • 49
  • 1
  • 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. – ihightower Feb 28 '14 at 15:46
  • 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. – ihightower Mar 03 '14 at 11:08