I have an html table that literally has like 30 columns of data, and I’m having a hard time framing it in such a way that it can be visible without massive left/right scrolling.
One thing I was wondering is if anyone has ever seen anything clever with column headers? Some of them just can’t be abbreviated down enough, but the column header is something like “Interview” and the value is numeric (lots of wasted space for the header alone). Granted, I could try and name these columns like INT or whatever, but there are lots of similarly named columns that it could become confusing.
Maybe some sort of auto collapsing columns based on mouse movement? Not sure.. I just need some creative suggestions on how to display this data!
Most likely the user will have a devil of a time comprehending 30 columns of data, regardless of scrolling.
I would recommend showing the most fundamental columns (things like name, description, identifying numbers — core stuff, hopefully there are only 10 of them or less), and then letting the user toggle on or off whatever columns they need. A bit like google squared.
Use Jquery and CSS to accomplish this in a clean fashion. There may also be Javascript UI libraries that do this for you (Jquery UI, YUI, others…)