Displaying/Formatting Tabular Data (web)

Question

In my example I have a table where each row is a user for example. Columns could include their name, address, email address, etc. I now need to add a column for (hypothetical example) their cat's names. While most people will have no cats and some people will have 1- 2 cats there will be the occasional person with 20 cats that create one very long row in the table. This is giving me an issue in presentation and for filtering/searching for cat names. Is there a good solution to displaying this type of data?

Answer 1

Several options:

1. Set a maximum width for the cell and allow the data to wrap
2. Place the content inside a wrapper tag (such as a div) and set the div with a fixed width/height and style of overflow:hidden to ensure that a particularly long word doesn't force out the width of the cell.
3. Truncate the output text on the server side

For cases #2 and #3, set the Title attribute of the TD tag to contain the full non-truncated text. This will present itself as a tooltip when hovering over the cell.

I would mention other CSS-based solutions but they're very sparsely supported right now, so not worth mentioning.

Answer 2

Have the first 50 (or whatever) characters of the field displayed as normal then put the rest in a block with its visibility set to hidden through CSS. Include a link / button / icon that will allow the user to toggle the visibility so they can see the entire value.

Answer 3

You might want to try doing something like what SO does. Namely, once someone reaches a certain point in their Rep, it suffixes the number and appromixates it. Ex. 10k instead of 10,236.

That way the numbers don't get out of hand.