Responsive Table Roundup

There is a huge debate on HTML tables and when it’s okay to use them. This post doesn’t deal with that. I’m going to assume that – like me – you’ve got a table, with at least somewhat tabular data, and you need to make it look pretty (aka functional) on phones and tablets. There’s a whole slew of options and none of them are perfect for every situation. Here is a roundup of some of the current methods.

Foo Plugins – Foo Table

  • Method: can hide columns entirely, or allow them to be selectively expanded/collapsed
  • Availability: free general jQuery plugin & free plugin for WordPress
  • uses CSS breakpoints
  • configure using data attributes on the table tags
  • themable, sortable, filterable, paginatable (okay, so that last one isn’t really a word)

jQuery Mobile – Table Widget

  • Method 1: Reflow mode – Re-formats the table columns at narrow widths so each row of data is presented as a formatted block of label/data pairs.
  • Method 2: Column toggle mode – Selectively hides columns at narrower widths but offers a menu to let users manually control which columns they see.
  • Availability: free CSS/jQuery plugin

Filament Group – A Responsive Design Approach for Complex, Multicolumn Data Tables

Zurb – Responsive Tables

  • Method: creates horizontal scrolling within table so all values can still be compared
  • Availability: free CSS/jQuery code
  • doesn’t unnecessarily hide data
  • still lets you compare rows, but does require horizontal scrolling

John Polacek – Stackable.js

  • Method: creates a copy of the table that is converted into a 2-column key/value format
  • Availability: free CSS/jQuery code
  • very readable output, but hard to make comparisons between entries

Mobifreaks – Responsive and SEO Friendly Data Tables

David Bushell – Responsive Tables (2)

Major props to Chris Coyier for his roundup, which can be found here:

Share this PostEmail to someoneShare on FacebookTweet about this on TwitterGoogle+

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.