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.
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
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
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
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
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):
henrysalt
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]
- hellsten
- NII Holdings
- nTelos
- Einstein Noah restaurant Group
- Portugal Telecom
- FRMO Corp.
- Weight Watchers International
- Daily Journal Corporation
- 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:
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]
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.
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: 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