Author: | charlespeters |
---|---|
Views Total: | 2,719 views |
Official Page: | Go to website |
Last Update: | June 29, 2016 |
License: | MIT |
Preview:

Description:
A simple responsive table solution which makes your HTML table better readability on mobile devices using CSS :before
selector and HTML5 data
attribute.
How to use it:
Use the data-heading attribute to define the header name for each table cell on small screens.
<table class="table"> <tr> <th class="table__heading">Name</th> <th class="table__heading">Type</th> <th class="table__heading">Grade</th> </tr> <tr class="table__row"> <td class="table__content" data-heading="Name">Gizmo</td> <td class="table__content" data-heading="Type">Robot</td> <td class="table__content" data-heading="Grade">A+</td> </tr> </table>
The core CSS rules for the responsive table. Add the following CSS snippets into your media queries with a specified breakpoint you prefer.
@media (max-width: 32rem) { .table__heading { display: none; } .table__content { display: block; padding: .5rem 0; } .table__row { margin: .25rem 1rem; padding: .5rem 0; display: block; border-bottom: 2px solid #FFC842; } .table__content:before { content: attr(data-heading); display: inline-block; width: 5rem; margin-right: .5rem; color: #999; font-size: .75rem; text-transform: uppercase; letter-spacing: 2px; } }