Tom’s Two Cents: Three Approaches to Responsive Table Design
September 18, 2014
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 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.
Stay up to date with our email updates!