HTML table column carry over when scrolling

Question

I have a pretty straight forward table, date ranges cross the x-axis and titles down the y-axis. My table its self has lots of columns, so many so that I need to scroll to the right in order to see all of the data.

I would like to, if possible have my first column which has all of the row titles always display on the screen as I scroll across the page. If possible, I have no idea how to even approach this... Can anyone point me in the right direction?

Answer 1

You could separate your table into two separate tables (the first column as the first table, and the rest as the second). Then, you can either place the first table in a div with position set to fixed at left:0 and top:0, or just set the second div (which contains your second table) to have overflow:auto.

Also, remember to move the second div to the right, otherwise they will be on top of each other!

Hope that helps!