Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

This question already has an answer here:

The web development office I work for is working on a fixed-width web site. On one page, we have a table inside of the fixed 960px space available. So far, this table has worked out great for us, but the data we're using actually includes so many other fields that we could display about three times the columns we have room for. The limited space is keeping us from displaying all of the data we could give our users.

One idea that we have discussed would be to make the entire website full width and use CSS3 media queries to show/hide table columns as more or less space is available. I'm less fond of this idea because I don't like changing the entire layout of a website to deal with a usability issue on one page. Another option people have been discussing is to put the table inside of a scrolling div so that all of the table columns can be available to all users. I feel like with all of the great jQuery plugins out there, there must be a better way to do this than these two options.

What is the best way to display more columns than you have room for in a table within a fixed-width layout?

share|improve this question

marked as duplicate by 3nafish, Matt Obee, rk., ChrisF, JohnGB May 17 '13 at 22:29

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1  
All columns might not be necessary. Try to split the table into mutliple views or present the data differently. –  dnbrv Feb 7 '12 at 21:39
    
An option (one I don't especially like) is what The Dragonvale Wiki has done, which gives you a "pop out" option for the table. –  Ben Brocka Feb 8 '12 at 14:19
    
@Ben Brocka - I'm not seeing what you described as pop out options. Can you tell me where they are? I'm facing the same issue and need to figure out a solution. I'm currently using an accordion that shows the main info for each row and then each row in the accordion showing only the relevant columns. However, we are needing to allow filtering and sorting on this data, too. –  MB34 Oct 9 '12 at 15:12
    
Hm, they've edited the tables to get rid of them (an improvement, it's a last-resort situation) I'll keep an eye out and see if I can find another example –  Ben Brocka Oct 9 '12 at 15:15
add comment

3 Answers

The responsive idea sounds good until you consider what you're going to show to which people. Responsive design is about showing the right information to the right device, not abusing CSS media queries because you've run out of space. Instead, take a step back and look at the real problem: you just don't have enough space.

Some options come to mind:

  • Just change the layout of that one page. Why change the whole website for one page? Just change that page. There's no universal law of web design that states that all pages must look the same at all times. A good rule of thumb here is context over consistency

  • Rotate the table by 90 degrees. If you have too many columns but only a few rows, try redesigning the table to use your available vertical space rather than the horizontal space by turning rows into columns and columns into rows.

  • Add controls to show/hide columns. If the table allows user to compare data between columns, consider adding a show/hide control similar to Windows Explorer that allows users to determine which columns they want to look at. This could actually be an improvement over your current design if the current one is crowded and reducing the number of columns to only display relevant data helps the user.

  • Split up the table. Break down the information you're trying to display and ask yourself if you really need to cram it all into one table. Often, you don't, and there are different ways to display the information. See if you can group the data in a different way that could use multiple tables with fewer columns.

  • Use pop out rows to reveal extra data. Collapse the table down to the bare minimum rows a user needs to take action and offer controls that allow them to pop out more info per row. This can be useful if you need to compare data between rows but don't want to look at all rows in the table at once.

  • Combine columns where possible. Instead of putting data in its own column, see where you can merge columns to not only save space but place related data together to improve readability.

  • Rewrite the content of columns and use icons where possible. Shorten things down to abbreviations and replace wordy repetitive text with succinct icons that can be scanned more easily.

share|improve this answer
add comment

You could use multi-line layout for results like Outlook 2007 and 2010 do (referred to as "compact layout" in the settings).

The results would look more like a designed list than a table, but then I think that often that is a good thing.

share|improve this answer
add comment

CSS-Tricks have some great examples you can have a look at, it's mainly for solving responsive problems, but I think some of the examples and ideas will suit a fixed layout. Don't miss the roundup.

share|improve this answer
    
Can you summarise some of the advice rather than just providing a link? –  JonW Feb 8 '12 at 9:53
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.