Pure HTML5/CSS Responsive Table Solution

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;
}
}