Skip to content

Mobile-first responsive tables with CSS

Here’s a rehash of an experiment I did a while back with responsive tables. The goal is to make style a table ‘truly’ mobile first, while maintaining semantic HTML.

Update

The initial demo was using min-width to handle the breakpoint which resulted in overly complicated CSS. This second demo reworks the CSS to use a max-width based breakpoint instead. It allows the table to naturally return to a table-like layout after the breakpoint is hit.

Screenshot of mobile first table
Mobile first (max-width)
Screenshot of desktop table (using max-width)
Desktop

Updated demo (CodePen): codepen.io/shellbryson/pen/yggOME

Git: github.com/shellbryson/codetips-responsive-tables

Original demo

Starting with mobile, we unwrap the HTML, turning each of the table elements into blocks that we can easily position.

We use the a data-attribute on <th> cells in the table body as hidden content for smaller screens (the default view as we’re mobile-first).

Screenshot of mobile-first table
Mobile first

On desktop, we use a breakpoint to give the table HTML elements back their proper display property values and hide our hidden content (data-attribute) titles. Our friends here are:

display: table-header-group;
display: table-row-group
display: table-row;
display: table-cell;
Screenshot of desktop table
Desktop table

A CodePen can be found here (resize your browser to see the responsiveness).

Leave a Reply

Your email address will not be published. Required fields are marked *