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.
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.
Updated demo (CodePen): codepen.io/shellbryson/pen/yggOME
Starting with mobile, we unwrap the HTML, turning each of the table elements into blocks that we can easily position.
We use the a
<th> cells in the table body as hidden content for smaller screens (the default view as we’re 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;
A CodePen can be found here (resize your browser to see the responsiveness).