How to Make Data Tables Viewable On Mobile Devices

I enjoyed this well explained tutorial on how to code multi-column data tables responsively (demo) so that they display in a usable format on small screen devices. The solution? Assign 'essential' and 'optional' classes to the the data columns and hide the optional columns at smaller screen widths using CSS3 media queries. Very nicely done.

[via CSS Tricks]

Posted on: January 2, 2012 | 1 Comment

Recent Entries in "CSS"

1 Comment Posted (Add Yours)

On smaller screens, data tables—or content considered to be tabular data—often doesn’t fit or can appear erratically. Unless you know that a device supports tables, avoid using them. Smaller tables with two or three columns work on most devices, but even then it’s not recommended. Try using a definition list () instead of a table to vertically display data.

Subscribe

Subscribe to my RSS FeedSubscribe to my Web Design Blog RSS Feed

Categories

Proud member of 9rules network