Best way to display more table columns than I have room for? [duplicate]

Question

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?

Answer 1

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.

Answer 2

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.