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]
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.