Responsive data tables

    One of the constant problems of layout designers of adaptive sites is the task of conveniently presenting ordinary tables on mobile devices. Here's what such tables look like most often:


    Not very convenient, right? Fortunately, there are already several tricky ways to solve this problem.

    1. The method from Chris Coyier


    Description and demo in Russian, original and demo in English.



    The bottom line is that the table is stretched vertically, only two columns remain in each row: the header and the data. The disadvantage of this method is that the result is a too long table, and it will take a long time to scroll.

    2. Way from Zurb.com


    Details and demo in English



    A good way in Javascript / CSS that adds horizontal scrolling for data cells, while the headers remain in place, is very convenient.

    3. Fashion by Scott Jehl


    Demo



    Converts a regular table into a beautiful chart. This method is not suitable for all data, but the result looks very interesting.

    4. Method from Todd Parker


    Demo



    In this method, a table on a small screen simply hides under a “spoiler”. As they say, cheap and cheerful.

    Also popular now: