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">
    <th class="table__heading">Name</th>
    <th class="table__heading">Type</th>
    <th class="table__heading">Grade</th>
  <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>

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.

Related Posts


Create A Simple Star Rating System Using JavaScript

Star Rating System is a small JavaScript library to create a customizable star rating control and gradually improves it from a regular checkbox with numeric values. Star…


A Simple File Upload That Shows A Preview of the Uploaded Image

File upload with preview aims to address the issue of showing a preview of the uploaded user photo in an easy-to-use package. This is a simple front-end…


Animated Sliding Active Menu Item Indicator In jQuery | Navigation Menu

Animated Active Menu Indicator – A recent scrolling navigation cursor that moves when you hover over or activate a menu item. Written in jQuery and CSS/CSS3. Must…


[iTooltip] Replace the Original Advanced Tooltip Library

The JavaScript library lets you convert native tooltips into customizable overlays. iTooltip is a pure JS to replace the native tooltip that creates a custom pop-up hint…


How To Use Online Ping In Vanilla JavaScript Ping.js

Ping.js is a small and simple javascript library for ping response times for servers in pure javascript. Ping.js is a vanilla JavaScript library to supply a web-based…


Convert An HTML File Input Type Into a Fancy File Uploader

jQuery Fancy File Uploader is a jQuery extension for converting an HTML file input type into a portable fancy file uploader. Choose from an MIT or LGPL…