Chris J. Lee

Dallas Drupal Developer

You are here

Responsive Table Solutions 2014 Edition

Here are some solutions i've reviewed:

  1. http://codepen.io/geoffyuen/pen/FCBEg - this method is css only. Not IE7/8 friendly. Based on Chris Coyier's responsive tables (http://css-tricks.com/responsive-data-tables/). This version requires the data attribute to all columns. I think this is probably best if there's a way to dynamically add the table header to each cell.

  2. Zurb responsive tables - Uses javascript and fires bind event on window resize. Therefore, it might not be triggered on a orientation change depending on jQuery version. Also, this approach is deprecated by the new table's approach

  3. Zurb foundation table component in F5 - As far as i know looks like stylistic changes. Not related to anything responsive.

  4. Bootstrap tables - Bootstrap tables just makes them horizontal scrollable. This would cause issues again with the android browser. Seems simple enough though.

  5. Filament group version This approach is nice and fancy but i think it's overkill. It allows filtering though. So This one does filtering well.

  6. jQuery Stackable - centers all the tables. Looks nice. Hard to read if there are many rows / columns.

Tags: 
Responsive
© 2017 Chris J. Lee