responsive table patterns

The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns.

This is accomplished by assigning semantic classes to the column headings that indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a., responsive design).

An excerpt from responsive table patterns

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.