Ultimate Scrolling Table

After searching and analyzing and searching and analyzing, looking for a scrollable table with fixed headers and footers, I finally found one of several "best" solutions that was the most appealing to me at this link. However, while the demo looked reasonably promising, the implementation has some aspects I thought could be improved. Here is my "Ultimate scrolling table".

The W3C CSS committee, as far as I am concerned, has reneged on its responsibilities. This sort of feature should be easily available in declarative CSS, but instead those browsers that used to implement something similar have dropped it in recent versions, for conformance to the W3C specifications. Hence, a bit of Javascript is required to achieve the goal.

There are a number of changes I made to the implementation:

Requirements:

The primary deficiency of the overall technique used in the original implementation linked to above, and also in my implementation, is the need to have a multiple copies of the whole table. Specifically, one copy is used for the scrolling part, another copy is made if there are headers, and another copy is made if there are footers. Since the need for scrolling is to deal with largish tables, duplicating the tables is annoying... but it does ensure that the browser will do the exact same calculations for column widths for each of the three tables. This solves another issue that seems to fall into the realm of responsibility of the W3C CSS committee: width specifications inside <table> elements are only recommendations, not guaranteed, so this replication of table data seems to be the only sure way to guarantee identical column widths for separated tables for the headers, table, and footers. After implementing this, I found another solution that makes such copies for the same reason.

For each table you wish to make scrollable, a call to UltimateScrollingTable must be made. The first parameter is the id of the <table> to scroll, and is required. Other parameters are as follows:

If the sort parameter is specified and non-zero, the sortable package must be included via a <script> tag in the page: UltimateScrollingTable does not automatically include it. When integrating with sorttable, do not include the class="sortable" for the tables that use both sorttable and UltimateScrollingTable; UltimateScrollingTable will add that to the appropriate copy it makes of the table, and insure that sorttable is invoked for that table.

One way to sort a column by code, if the column has an id for its <th> element, is to find that element by its id and simulate a click, as in: document.getElementById('thId').click(); Other ways to find the element also work, but because the element is part of the duplicated table, you might want to look at the generated HTML in a debugger before you spend time figuring out other ways to find it. To enable the scrolling, all copies of the table are wrapped in a <div>; then each copy is placed in another <div>. It can be handy for <th> elements to have id names to access the column to simulate clicks for sorting, but they are removed except in the visible <th> cells. Any other ids in the table are duplicated, and may cause problems.

The implementation can be viewed via HTML source. Here is a sample table repeated 3 times at different sizes and slight tweaks to show various features. Here is a version you can fiddle with.

One size table, only headers

column 1column 2 has a really long header description
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


Different size table, showing they are independent, headers and footers

column 1column 2 has a really long header description
bottom 1 has a really long footer descriptionbottom 2
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


Very narrow table for horizontal scrolling, only footers

bottom 1 has a really long footer descriptionbottom 2
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


Examples of UltimateScrollingTable integrated with sorttable

Like the second example, only sortable.

column 1column 2 has a really long header description
bottom 1 has a really long footer descriptionbottom 2
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


Like the second example, only sortable, with single line header.

column 1column 2 has a really long h
bottom 1 has a really long footer descriptionbottom 2
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


This is a really wide table, with no horizontal scroll bar, and configured width of 2000.

column 1column 2 has a really long hcolumn 3 has a really long hcolumn 4 has a really long hcolumn 5 has a really long hcolumn 6 has a really long h
bottom 1 has a really long footer descriptionbottom 2bottom 3bottom 4bottom 5bottom 6
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


This is a really wide table, with no horizontal scroll bar, configured max-width of 10000px.

column 1column 2 has a really long hcolumn 3 has a really long hcolumn 4 has a really long hcolumn 5 has a really long hcolumn 6 has a really long h
bottom 1 has a really long footer descriptionbottom 2bottom 3bottom 4bottom 5bottom 6
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


This is a really wide table, with no horizontal scroll bar, configured at window width.

column 1column 2 has a really long hcolumn 3 has a really long hcolumn 4 has a really long hcolumn 5 has a really long hcolumn 6 has a really long h
bottom 1 has a really long footer descriptionbottom 2bottom 3bottom 4bottom 5bottom 6
abc This cell is going to grow now too, to see what sort of balance is reached, and how soon. One would expect that the biggest cell would have the widest column, and that does seem to be the case here.

def
ghijkl
mnopqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.pqr This cell has lots and lots of data in it so will take lots and lots of space this is a test to see how space is allocated when that happens.
stuvwx

yz


End