Data Display of Tables: Table Cells with Must-See Values

Question

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.

Thanks.

Answer 1

My suggestion is simply go with 1st alternative. But show full data on click.

Answer 2

Depending on end users familiarity with key values, and how the data on this page is interpreted, you can certainly use combination of what you've listed. The only option I would take off the table is making text smaller.

Another option is to combine related data. For example, if you have two separate columns for Last Name and First Name, you can save some space by having a single column "Last Name, First Name". Column header can still be sorted independently.

Another option is to stack related data vertically. This only works if they're distinct value and data type, yet commonly found together. For example, DOB and Gender.

01/21/1979 Female