<h2>Responsive Table</h2>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-header="Name">Thaddus Bezarra</td>
      <td data-header="Email">tbezarra0@hostgator.com</td>
      <td data-header="Department">Product Management</td>
    </tr>
    <tr>
      <td data-header="Name">Linc Macourek</td>
      <td data-header="Email">lmacourek1@wisc.edu</td>
      <td data-header="Department">Legal</td>
    </tr>
    <tr>
      <td data-header="Name">Arthur Brimmicombe</td>
      <td data-header="Email">abrimmicombe2@instagram.com</td>
      <td data-header="Department">Product Management</td>
    </tr>
    <tr>
      <td data-header="Name">Ferdinand Cater</td>
      <td data-header="Email">fcater3@dailymail.co.uk</td>
      <td data-header="Department">Sales</td>
    </tr>
    <tr>
      <td data-header="Name">Dee dee Ricks</td>
      <td data-header="Email">ddee4@ask.com</td>
      <td data-header="Department">Engineering</td>
    </tr>
  </tbody>
</table>

/** Check out related blog post: https://andromedagalactic.com/blog/tables-have-their-place/ **/

:root {
  font-family: sans-serif;
  padding: 2rem;
}

table {
  background: #fff;
  border-collapse: collapse;
  width: 100%;
}

tbody,
thead,
tr {
  display: block;
}

thead {
  position: absolute;
  left: -9999rem;
}

th,
td {
  display: block;
  padding: 1ex 1ch;
}
td:before {
  content: attr(data-header) ": ";
}
th,
td:before {
  color: slategray;
  font-weight: regular;
  font-variant: small-caps;
  text-transform: capitalize;
  text-align: left;
}

tr {
  border-bottom: solid 1px teal;
}
tbody tr:first-of-type {
  border-top: solid 1px teal;
}

tbody tr:nth-of-type(even) {
  background: aliceblue;
}

@media (min-width: 600px) {
  table,
  thead,
  tbody,
  tr,
  td,
  th {
    display: revert;
    position: revert;
  }
  td:before {
    content: "";
  }
}