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

  • http://fooplugins.com/plugins/footable-jquery/
  • 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

  • http://api.jquerymobile.com/table/
  • 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

  • http://zurb.com/playground/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

  • http://johnpolacek.github.io/stacktable.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: http://css-tricks.com/responsive-data-table-roundup/

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 *


three − 3 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>