Tom’s Two Cents: Three Approaches to Responsive Table Design

September 18, 2014

Blog | Development | Tom’s Two Cents: Three Approaches to Responsive Table Design
Tom’s Two Cents: Three Approaches to Responsive Table Design

Responsive sites are the name of the game these days. If your site isn’t responsive and your content not formatted correctly it leads to a bad user experience and your SEO rating drops as a result. No one wants that!

Tabular data, in particular, is sometimes hard to display on smaller screens because their default nature forces the data displayed in the cells to be squished.  Rest assured, the right developer can make sure your tabular data displays well no matter what type of device your user is viewing it on.

Three approaches to responsive table design:

Solution 1: Foundation is a family of front-end frameworks that make it easy to design responsive sites. It uses CSS and JavaScript to make the table scrollable  and the first column fixed.  Check out a demo here, resize your browser or view the page on your phone.

Solution 2: This solution involves making the data tables scrollable without making any columns fixed. You do this by using the CSS value overflow: auto; on the table wrapper so it can scroll horizontally and vertically on small screens. I implemented this solution on the redesigned Steben site,  check it out!

Solution 3: This solution duplicates the table headings in the individual table cells, hides them on large screens, and shows them on small screens.  Here’s a demo that I created using media queries, you can view it on a tablet or phone.

With this option, there’s no need to make the table scroll and it keeps everything sectioned off neatly.  This involves extra markup, and it’s not bulletproof since long table headings would wrap onto multiple lines but it’s another way to achieve the same goal.

Do you have questions about responsive design or know about other solutions you want to share? Tweet us @GeekHive.

Tom Deluca, Front-End Developer, GeekHive

Tom DeLuca

Developer
Tags
  • CSS
  • JavaScript
  • Responsive
  • Tutorial

Recent Work

Check out what else we've been working on