Table data causing horizontal scroll

Question

I've got a table on a webpage, with (say) 8 columns, and it's worked just fine until recently...

A user registered with an email address for a display name (not a huge issue, but the email is massive). Now, as one of the columns is a 'reported by' containing username, any pages with said user on them now have a massive 'reported by' column...

I should also emphasise, the table width was 100% (minus a 'margin') prior to this issue, and it worked just fine).

Is there a clever way to introduce a line break on a '.' or an '@'? Alternatively, how do people normally get around this? Interesting solutions to this annoying problem are welcomed!

Thanks in advance,

Answer 1

You could set a max-width on the column and overflow:scroll or even overflow:hidden.

Answer 2

Use the table-layout css property.

table-layout: fixed;

http://www.quirksmode.org/css/tables.html#tablelayout

Answer 3

When you generate your html table content code, truncate every content extracted from your database to a maximum width. Your truncating function can easily add a tooltip giving the full label.

Alternatively, do this in javascript on pageload. Parse every table cell and truncate the content if it's too large. It's not as nice as server-side truncating, though.

The upside is that you can give the full label in a tooltip, append '...' to let the user know the label is truncated, etc.