One Dimensional Scrolling Table Headers
There is a problem with large tables on web pages. When scrolling into the table, the table headers scroll out of the viewport. It has been suggested to give the headers a position value of "fixed", but what if there are headers for both x and y values? Unfortunately, there is no position : fixed-x or fixed-y value. The desired effect is a table header that only scrolls to one dimension.
The solution was to separate the headers from the table and use an onscroll event on the table. As the table's scroll position changed, the inverse margin position of the header was applied. For example, if the table scrolled 100px to the right, the header would shift 100px to the left, appearing to travel with the table.
Unfortunately, this means separating the headers from the table content, which does not make for semantic markup for the sake of a useful visual effect. I suppose a solution for this would be in the direction of fixing the position of the individual header cells and adjusting them to table cell scroll positions.
Test | Test | Test | Test | Test |
|---|
Test |
|---|
Test |
Test |
Test |
Test |
Test |
Test |
Test |
Test |
Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
Test | Test | Test | Test | Test |
