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
Michael Timbs
15,761 PointsBest way to make Tables Mobile Responsive?
I am a bit old school and really hate browsing the web on my mobile device. Unfortunately about 85% of my website traffic comes from mobile devices!!! Anyway.....
One of my latest projects is a price comparison site which I have displayed in a table. Looks perfectly fine on desktop but tables are not responsive for mobile devices! Is there an easy fix or solution that someone has implemented to change up data that suits tables to display nicely on mobile?
My new site is brownlowbestodds.com.au if anyone is interested in looking at my problem.
1 Answer
Codin - Codesmite
8,600 PointsI would recommend trying CSS Media Queries to style your table based on detected device's screen size.
Media Queries on the CSS Basics Track here: https://teamtreehouse.com/library/css-basics/designing-with-the-latest-features/media-queries
sycoinc
2,688 Pointssycoinc
2,688 PointsYou can either start with using @media queries which set specific styles to act differently depending on the width of the browser window OR look into twitter bootstrap responsive tables as they are the 2 easiest methods without having to revamp or rework your whole website.
Either Way a quick search on google for responsive tables shows a few tutorials on how to write the code for it and a few have stylesheets and javascript files to add to your site which then you only have to add styles to your existing tables for it to work.