I have a data-driven web app with horizontal resolution limit of 1280px, yet up to 15 columns (table cell data varying between 0-255 characters). I wouldn't like to display data on multiple rows as it makes the table rows different height. Once the value's become long, I would need a way to display the table cell values as they are saved in the DB.
What kind of alternatives for data display I have?
Here's some of the ideas I have thought of (side-effects on brackets):
1) Concatenate & use title attribute: concatenate the table-cell values with CSS and use title attributes to display the full data (could be hard for some users to see the find value). See example
2) Smaller text: smaller text gives more space (readability suffers)
3) Table with horizontal scroll: all the values can be seen on the UI (bad UX)
4) Reduce columns: grows table cell sizes (can't really remove anything)
5) "The Key-Value Approach": Key-value would works for some cases (I would like to see all of the data with one gaze, preferably)
6) Percentage widths for columns: estimate the max values for each column (and hope for the best, expect the worse)
7) Other suggestions?: JSFIDDLE template for your use.