Press "Enter" to skip to content

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


See Demo And Download

Official Website(charliewilco): Click Here

This superior jQuery/javascript plugin is developed by charliewilco. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.