HTML

CSS

JS

body {
    width: 90%;
    margin: 0 auto;
}

table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  background: #fefefe;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
  color: #f6f6f6;
}

table thead{
  background:#1976d2;
  border-bottom: none;
  color: #fff;
}

table tr {
  padding: .35em;
}

table tr:nth-child(even) {
  background: #f0f0f0;
}

table tbody tr:hover {
  background: #d9e3e8;
}

table th,
table td {
  padding: 0.625em;
  text-align: center;
}

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

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

table caption {
    font-size: 1.3em;
  }

table thead th {
    display: none;
  }

table tr {
    display: block;
  }

table td {
    display: block;
    text-align: left;
  }

table td::before {
    content: attr(data-label);
    font-weight: light;
    text-transform: uppercase;
    font-size: 0.7em;
    margin-bottom: 0.6em;
    color: #1976d2;
    margin-right:10px;
  }

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

Responsive Table with Vertically Stacked Cells

A responsive table that will change layout when in mobile view. In the normal desktop view, this table looks just like any other table, but once the screen size is less than 600, it will become a table with vertically stacked cells.

This is done by using the data-label attribute. Whatever changes you make to the table heading, you need to modify the data-label as well. In mobile view, data-label becomes the table header.

If you want to show the headers on its own row in mobile view, you can add this code display: block;to CSS line 77.