Grow your CSS skills. Land your dream job.

Responsive Multi Column Data Tables

Published by Chris Coyier

Maggie Costello Wachs from Filament Group shares the best approach to responsive data tables I've seen yet. Remember the problem: exploring a large data table on small screen devices means a bunch of horizontal and vertical scrolling, which sucks. Her solution involves marking columns as "essential" and "optional" with CSS classes and hiding the optional ones with media queries at smaller screen sizes. Then to keep all the data accessible, providing a (dynamically created) dropdown of checkboxes to reveal the hidden optional columns.

Update: changing the link to Filament Groups "Tablesaw" which is a collection of plugins that handles lots of different responsive table techniques.

Direct Link →

*May or may not contain any actual "CSS" or "Tricks".