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:
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 1 | column 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 | |
ghi | jkl |
mno | 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. |
stu | vwx |
yz | |
Different size table, showing they are independent, headers and footers
column 1 | column 2 has a really long header description |
---|---|
bottom 1 has a really long footer description | bottom 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 | |
ghi | jkl |
mno | 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. |
stu | vwx |
yz | |
Very narrow table for horizontal scrolling, only footers
bottom 1 has a really long footer description | bottom 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 | |
ghi | jkl |
mno | 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. |
stu | vwx |
yz | |
Examples of UltimateScrollingTable integrated with sorttable
Like the second example, only sortable.
column 1 | column 2 has a really long header description |
---|---|
bottom 1 has a really long footer description | bottom 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 | |
ghi | jkl |
mno | 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. |
stu | vwx |
yz | |
Like the second example, only sortable, with single line header.
column 1 | column 2 has a really long h |
---|---|
bottom 1 has a really long footer description | bottom 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 | |
ghi | jkl |
mno | 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. |
stu | vwx |
yz | |
This is a really wide table, with no horizontal scroll bar, and configured width of 2000.
column 1 | column 2 has a really long h | column 3 has a really long h | column 4 has a really long h | column 5 has a really long h | column 6 has a really long h |
---|---|---|---|---|---|
bottom 1 has a really long footer description | bottom 2 | bottom 3 | bottom 4 | bottom 5 | bottom 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 | |||||
ghi | jkl | ||||
mno | 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. | 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. |
stu | vwx | ||||
yz | |||||
This is a really wide table, with no horizontal scroll bar, configured max-width of 10000px.
column 1 | column 2 has a really long h | column 3 has a really long h | column 4 has a really long h | column 5 has a really long h | column 6 has a really long h |
---|---|---|---|---|---|
bottom 1 has a really long footer description | bottom 2 | bottom 3 | bottom 4 | bottom 5 | bottom 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 | |||||
ghi | jkl | ||||
mno | 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. | 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. |
stu | vwx | ||||
yz | |||||
This is a really wide table, with no horizontal scroll bar, configured at window width.
column 1 | column 2 has a really long h | column 3 has a really long h | column 4 has a really long h | column 5 has a really long h | column 6 has a really long h |
---|---|---|---|---|---|
bottom 1 has a really long footer description | bottom 2 | bottom 3 | bottom 4 | bottom 5 | bottom 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 | |||||
ghi | jkl | ||||
mno | 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. | 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. |
stu | vwx | ||||
yz | |||||
End