Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Forum Contest: Design a Responsive Data Table

Hi everybody,

It's time for a new Treehouse Forum contest! First, watch this video to learn more:

After you've watched the video, please read the details below carefully. I'm looking forward to your entries!

How to Enter: Create your responsive data table entry as a "pen" on Codepen.io and then post the link to your pen as an answer to this post.

Due Date: All entries must be submitted by Sunday, June 1st at 11:45pm ET. Here's a timezone chart so you can see what time that is for your locale.

Prize: The entries will be judged by Treehouse teachers based on both design and code. One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on Monday, June 2nd and reveal the next contest.

So you want a response table, responsive as in responsive design or as in responsive interactions?

Good Luck guys!

Andy Swinford
Andy Swinford
8,152 Points

Good luck everyone, there are a lot of VERY good entries. :)

33 Answers

Not sure I understand the challenge correctly. Hopefully this table to cards solution fits. http://codepen.io/Founts/pen/qhpDo

I think u got it right I understood it the same way

Looks nice. Cool trick.

Thanks Mark. And thanks Hass for confirming my thinking. : )

it does work ..............but I think what they wanted is when you resize the browser the table should readjust ( responsive)

Fixed! Perhaps I'll give it its own thread. http://codepen.io/anon/pen/iahxm

Andy Swinford
Andy Swinford
8,152 Points

Here is my attempt for a responsive table: Pen / Full

Please let me know if you have any advice on how to improve. :)

EDIT: Updated Link

Stéphane Diez
Stéphane Diez
19,350 Points

This is my attempt =) http://codepen.io/hakura/pen/ebglw I look up to the World Cup that starts soon, i hope that we can see great matches =)

viva españa :)

Lol looks really good :) ........Argentina will destroy Italy :) if they meet.

Nice job Roberto.

Fernando Gomez
Fernando Gomez
18,527 Points

Roberto, good job on the table. I love that there's so many soccer fans in here......GO MEXICO!!! I know....they're not a big power team like Germany, Spain, or Brazil, but I still have to root for them since it's my country. I hope they make it to the quarter finals at least. If they make it past that, I'll be the happiest man in the world!!!

Jonathan Seligsohn
Jonathan Seligsohn
23,116 Points

Ignore the colors and general styles - you'll see the "responsiveness" by resizing and hovering over "choose": http://codepen.io/JSeligsohn/full/yfEep

Becky Castle
Becky Castle
15,294 Points

Yeah, that "choose" option is pretty cool

I agree,love the choose option, but at first i didn't know to click on the arrows...then i got it. :)

Andy Swinford
Andy Swinford
8,152 Points

I like the choose option. :)

Ashlynn Pai
Ashlynn Pai
11,679 Points

http://codepen.io/ashlynnpai/full/zBLJw/

http://codepen.io/ashlynnpai/pen/zBLJw

I started out making one using API data pulls, until I realized my API keys would be exposed on codepen, so I put that one on my site:

http://www.ashlynnpai.com/applications/travelbits/

Out of the box :)

Jacob Miller
Jacob Miller
12,466 Points

Thanks Amadeo and Anneke! :)

Very Responsive Jacob..really like.

Kristy Knapp
Kristy Knapp
10,632 Points

That's a great table! The red on hover was a little jarring at the smaller widths, but I understand the color choices. I liked the change for smaller widths and the sorting feature.

Kashif Nawaz
Kashif Nawaz
4,626 Points

wish to participate in the contest but i need to work hard for it i think its take some time for me to participate hope so in the next contest i will participate required your help to learning codes

Kashif Nawaz
Kashif Nawaz
4,626 Points

wish to participate in the contest but i need to work hard for it i think its take some time for me to participate hope so in the next contest i will participate required your help to learning codes

This is my entry : - http://codepen.io/kjdaly/pen/edniB

I thought I’d keep up the intermittent word cup theme. Australia is the weakest team and we are in the group of death but we are staying hopeful anyway!

Full: http://codepen.io/SebastianHaviland/full/vaKJF

Pen: http://codepen.io/SebastianHaviland/pen/vaKJF

My first contest, hope i got the details correct.

http://codepen.io/errinjohnson/pen/lejia

made some adjustments and added content and then need a need to add media queries..felt desktop and tablets would look better. added some comments for documentations. My table was very fluid without media queries but wanted to add content of some personality to tablet and desktop views.

Will we be getting feedback from our responsiveness or lack there of. :)

Mufaddal Motorwala
Mufaddal Motorwala
4,543 Points

Hi, Check out below link : Its showing a simple table in big and tablet resolution but when it come to mobile it shows heading and content for each column, that's how it will be easier for reading - http://codepen.io/mufaddalmw/pen/fleCy

Rémi BRUGUIER
Rémi BRUGUIER
4,970 Points

Here we go : http://codepen.io/superguru/full/cFhiw/

Thanks for another fun contest, looking forward to the next one (as I didn't have much time for this one :()

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Hi everyone,

This was a challenging contest, so I'm glad to see that so many of you participated! You all created some really great entries, and you should feel good about the work you've done. These are nice additions to a portfolio of work.

Congratulations to this week's winner, Jacob Miller! He created this really nice responsive table that features a nice design, sortable columns, and most importantly, responsive layouts that make sense.

The next contest will be announced shortly! Thank you all for participating. :)

Jacob Miller
Jacob Miller
12,466 Points

Wow! Thanks so much! :) :) :)

Congrats Jacob.

congrats Jacob! :)

Jacob Miller
Jacob Miller
12,466 Points

Thanks everybody! This contest had a lot of great submissions - you all had some really nice designs!

Chase Lester
Chase Lester
10,972 Points

Congrats. Your table was amazing

Jacob Miller
Jacob Miller
12,466 Points

Thanks man! Yours was pretty awesome too - although looking at it makes me thirsty for iced tea with Jack Nicklaus and Arnold Palmer at the top :P

Congrats, Jacob!

I loved this contest - it featured many creative ways to solve the responsive table issue! Great inspiration from all.