One of the problems in a tabular representation of data, is text wrapping inside cells. There are some options available, like:
- Fixing the width of the columns, and enlarging the rows height to encompass all of the text.
- Letting columns fit the contents width by stretching each column and stretching table container
- Letting columns fit the contents width by stretching each column and putting scroll on the table container
- Fixing the width of columns and height of rows, and hiding the portion of text which is overflown.
- Fixing the width of columns and height of rows, but letting the cells have scroll inside them.
And many other available options. But each of these options prove to be inadequate in some UI scenarios. For example, when you work in a web page, you shouldn't let your table take as much width as it wants. Thus, you should limit the width of your table. On the other hand, sometimes you have to show a long text (2 paragraphs for example) in a cell. You can hide the overflow portion. But there are still other times when you really need to show almost everything.
We're trying to create a web application in which a big amount of heterogenuous data should be represented in tabular format. We want to limit and fix our design to 960px width, and we have a sidebar also. Therefore, we don't have more than 700px for our tables and grids. We can't decide which approach is the best approach for formatting our data in tables.
Does anyone know of a good UI and UX research about the best practices of formatting HTML tables, regarding text wrapping? Do you have any experience that can help?