Pure HTML5 / CSS3 Responsive Table Solution

Category: CSS & CSS3 , Table | May 2, 2016
Author: AllThingsSmitty
Views Total: 16,273 views
Official Page: Go to website
Last Update: May 2, 2016
License: MIT


Pure HTML5 / CSS3 Responsive Table Solution


A pure HTML5 / CSS3 solution to make your html table more readable on small screens, without any JavaScript.

How to use it:

Use the data-label attribute to specify the corresponding thead element for each table cell.

      <th scope="col">Column 1</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Column 4</th>

    <td scope="row" data-label="Column 1">1</td>
    <td data-label="Column 2">2</td>
    <td data-label="Column 3">3</td>
    <td data-label="Column 4">4</td>

Style the regular html table.

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;

table tr {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;

table th, table td {
  padding: .625em;
  text-align: center;

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;

Make the html table responsive using CSS3 media queries.

@media screen and (max-width: 639px) {

table { border: 0; }

table thead { display: none; }

table tr {
  border-bottom: 3px solid #ddd;
  display: block;
  margin-bottom: .625em;

table td {
  border-bottom: 1px solid #ddd;
  display: block;
  font-size: .8em;
  text-align: right;

table td:before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
  text-transform: uppercase;

table td:last-child { border-bottom: 0; }



You Might Be Interested In:

Leave a Reply