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

CSS

Posted by mrx3
mrx3
8,742 Points

Is there a way to make a table responsive with just CSS? (Codepen included)

The table I've made is kind of responsive. The table will scale down, but after a certain point the content breaks outside the borders around the table, and horizontal scroll bars appear. For instance, I'm using google chrome, and the window resizer app. If I select the smallest option which is 320 X 480, you will see that table breaks outside the borders.

I could use media queries, which I plan to later, making the font-size smaller but I think the font-size would actually be way too small for viewing.

Does anyone have an idea on how I can make this work without Jquery or JavaScript? If Jquery is the only option, do you have a particular Jquery plugin you use? Thank you in advance for any help.

Codepen: http://codepen.io/mike316/full/PqQwgd/

1 Answer

sean murphy
sean murphy
9,435 Points

Responsive data tables are tough. However, there was a good article on CSS-Tricks regarding this issue! Using media queries, breaking tables into lists, and a couple other tactics can be used to creating a clean user experience.

https://css-tricks.com/responsive-data-tables/

mrx3
mrx3
8,742 Points

I have seen the css-tricks article, but I have not read through it. It sounds like that would be really the only option to do it. Thanks Sean for the reply.