I have a page where I output some data inside a table. The table usually has a lot of columns, which makes me scroll horizontally. However, when I scroll to the right I can no longer see the labels that the data corresponds to. I would like to keep the label in place, so what I thought to do is to add a bit of jQuery magic. Before I do that I wanted to run it by someone to see if there's anything I may be missing.
I thought of:
- Using clone() to copy table
- Insert an ID for cloned table
- Delete all cells except the ones in the first column
- Add inline CSS to keep position fixed, change z-index to hover above original table
- Possibly get vertical position of the original table to position it properly
Does this sound like the right approach or is there a better way to do this?