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.
And on smaller screens:
Horizontal Scroll Table
Zurb put together a table solution with 3 goals in mind:
- Doesn't break responsive layouts
- Doesn't unnecessarily hide data
- Still lets you compare rows
Column Display Menu
A 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.
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