Responsive Tables: Best Practices and Examples

By James Knutila on Wednesday, April 02, 2014

Responsive Tables: Best Practices and Examples
Data tables are one of the hardest things to do in responsive web design. Smaller screens make it extremely difficult to show a complex table. 

There are plenty of creative responsive table solutions out there. But before you begin, ask two important questions: What information needs to be displayed? And is it necessary to compare rows and columns?

Some responsive table patterns will hide data from mobile visitors. Don't make assumptions about what your visitors want based on their device. 

We recommend Chris Coyier's solution, for the reasons below. However, as with most responsive design challenges, the right solution depends on your content. Let's take a look at some of the best table solutions.

Chris Coyier's Responsive Table


Coyier's table uses basic CSS to reformat each row into a block of content. It's lightweight, doesn't block access to data, and eliminates the need for horizontal scrolling. View demo.

Larger screens:


And on smaller screens:



Horizontal Scroll Table


Sometimes columns and rows need to be compared. Bootstrap's documentation offers a simple "table-responsive" class that allows the users to scroll horizontally without breaking your layout. View demo.



Frozen Column


Zurb put together a table solution with 3 goals in mind: 

  1. Doesn't break responsive layouts
  2. Doesn't unnecessarily hide data
  3. Still lets you compare rows

It's a Javascript/CSS combo that essentially freezes a column and allows for horizontal scrolling for comparison. View demo.


Column Display Menu


The Filament Group has put together a solid solution that lets you compare data. The difference here is Javascript that allows you to control which data is displayed via a "Display" drop-down menu. View demo.


FooTable


JQuery plugin that hides columns in certain sizes, but adds a "+" sign to let the user expand that row to show more data. There are multiple variations on the table below. View demo.


Flip Scroll 


Dave Bushell's interesting solution changes the orientation of the table, swapping the column labels to the left and displaying a row's data horizontally. Potentially disorienting, but it could be a good solution in some scenarios. View demo


Tap to View


Scott Jehl has a couple creative solutions including turning a table into a pie chart. In this tap-to-view table, you swap in a thumbnail of the table that links to a full version. The thumbnail doesn't ruin the browsing experience, and shows the full table to people who really want to see it. View demo.




All of these solutions are good options, depending on your data. In most cases, we still recommend Chris Coyier's basic table. What responsive table patterns have worked for you?

Image via Footable

DevKit Templates

Find the website template you want in the Moboom Market