Simple Responsive Table Solution in Pure HTML5/CSS

Responsive Tables is a simple table solution that makes your HTML table better readable on mobile devices with CSS pre-selector and HTML5 data attributes.

table responsive in mobile view, table responsive bootstrap, material design responsive table, responsive table css demo, tables on mobile devices html, responsive table demo

How to make use of it:

Use the data-heading attribute to specify 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>

Add the following CSS snippets to media queries with a specific breakpoint of your preference.

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

Pure HTML5/CSS Responsive Table Solution Plugin/Github