Elegant replacements for wide tables?
August 26, 2013 4:17 PM   Subscribe

Web design question: I have an arbitrarily wide set of data that I'm currently displaying using and it's breaking the layout (see example). The companies on the right handside can be thought of as owned by the user at the left. I would like an elegant way to display this information. What are my options? Both static and dynamic solutions would be appreciated, thanks.
posted by prunes to Computers & Internet (7 answers total) 1 user marked this as a favorite
 
What do you mean by "right" and "left"? Does the thing in the leftmost column own all of the things in the columns to its right? Or are the columns paired in the order:

owner1: ownee1, owner2: ownee2, etc...

Or what?

As it stands I can't tell what you're trying to show us.

If "hellsten" owns 7 things including "nTelos" and "Weight Watchers International", isn't this just a nested unordered list? Is there a reason it cant just be something like:
hellsten:  NII Holdings
           nTelos
           Einstein Noah restaurant Group
           Portugal Telecom
           FRMO Corp.
           Weight Watchers International
           Daily Journal Corporation

henrysalt: Hertz
That's simple enough to put together as a two-column table where each cell in the right column contains an unordered (or ordered) list.

CSS to get it to work as a nested list would be more complicated but is also doable.
posted by tylerkaraszewski at 4:26 PM on August 26, 2013


Really cheap: list the sub companies in the tooltip.

Slightly less cheap: on hoverover, a list appears below.

Before answering more, what's the goal? Show count comparisons? Find a subcompany using control-f?

Display should reflect the story you want to tell, and the queries you want to support.
posted by gregglind at 4:27 PM on August 26, 2013


Force there to be a certain width that you can't go beyond and wrap the text after that. E.g.:

username1    company1 company2 company3
                      company4 company5 company6

username2    company1 company2 company3

username3    company1 company2 company3
                      company4

That means there's variation vertically, but you don't break the layout horizontally.
posted by limeonaire at 4:30 PM on August 26, 2013


The first thing I thought of was the exact nested list tylerkaraszewski recommends.
posted by Nonsteroidal Anti-Inflammatory Drug at 4:31 PM on August 26, 2013


Response by poster: @tyler your interpretation is correct. It does seem like your example is probably the best way to do this.
posted by prunes at 4:35 PM on August 26, 2013


You can also forego the <table> and literally use nested lists (<ol> or <ul> elements):
  • hellsten
    • NII Holdings
    • nTelos
    • Einstein Noah restaurant Group
    • Portugal Telecom
    • FRMO Corp.
    • Weight Watchers International
    • Daily Journal Corporation

  • henrysalt
    • Hertz

You can then style it with CSS and/or JavaScript if you want to make it look more tabular, or be collapsible, or whatever.
posted by mbrubeck at 5:07 PM on August 26, 2013 [1 favorite]


What I do:

1. Install Playground's Responsive Tables. This is a pretty good responsive solution, but doesn't fix everything.
2. For very wide and tall tables, I put them into a div container with the following CSS: border-collapse:separate;border-top-left-radius:5px;border-top-right-radius: 5px;height:500px;overflow:auto;padding:0.5em;width: 98%;

This constrains them nicely into a scrollable div, but needs one more thing for folks who want to see more all at once.

3. Install colorbox or lightbox and put a copy of the table into the hidden div, with a colorbox/lightbox link above the table on the page. Users have the choice to scroll the div on the page, or open the table in a colorbox/lightbox overlay and see a larger version instead.

This leaves me with a nice, responsive design with options for more expansive viewing for those who want it.
posted by christopherious at 5:09 PM on August 26, 2013 [2 favorites]


« Older "Best of" recommendations for 80 days of...   |   How to handle this messed up dental implant! Help!... Newer »
This thread is closed to new comments.