I have a page of data.
There is a top header row of column names, along the top.
There is a column of row names, down the left.
And then I've got a grid table, and in each cell I show a tick if the value is 1, and show nothing for value of 0.
At the moment I've got 100 rows and 20 columns - both will scale upwards in the future.
The design requirement is that the table fits in a space which is 600px wide. Height is flexible.
My first thought was to use inline frames. Or a div with css applied to set the scrolling width & height.
Both seem to work okay (is one particularly better than the other?)
The problem is how to split the screen.
I need a sideways scrolling effect that includes the data and also the top row. That is the first requirement, so that users can go sideway until they see the column they are looking for, then they can read downwards to check the data.
But with 100 rows of data I need a vertical scroll as well, and one that keeps the top row in place and moves everything else down.
Can this be done?
What I need
- row 1 col 1 never moves.
- all rows starting from column 2 can scroll sideways, keeping col1 on the left unmoving
- all cols starting from row 2 can move up and down, keeping row1 at the top unmoving.
- table width 600px
- viewable height is flexible
I'm not sure whether this is impossible, or am I just missing something?
Would appreciate some creative inspiration :)