I have a Twitter Bootstrap based table with responsive CSS. Everything looks good but, when I try to put more columns than the size of the table supports, I have a line breaking. I tried to change font size but, I think it would be strange or confusing for the user if I have different font sizes in each table, so I am in a dead end.
Some restrictions: The table must not exceed 940 pixels of width and I cant divide the information in multiple tables.
This is what I have:
Is there a better way to display tabular data considering the restrictions?
Answer
First option, if you do not wish to change any other parameters, you can implement a horizontal scroll bar. It's not the best option, but, it does get you to show(?) the entire table with consistent size without exceeding the 940 pixel width.
Second option, make the columns movable. You wrap/crumple up the out of bound columns so as they only expand when the wrap/crumple is clicked on. This way, the user can customize the table to see only things he's interested in and the rest information is still available but, hidden away.
Third option, go down the path of information visualziation. If you are not hell bent on using a table, you can look into small multiples or multivariate charts like parallel plots, etc. depending on the type of data you have and the output you desire.
No comments:
Post a Comment