@media
only screen and (max-width: 1200px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr { border: 1px solid #ccc; }
  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 200px;
    margin-left: 150px;
  }
  td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
  td:nth-of-type(1):before { content: "ID"; }
  td:nth-of-type(2):before { content: "First Name"; }
  td:nth-of-type(3):before { content: "Last Name"; }
  td:nth-of-type(4):before { content: "E-mail";}
  td:nth-of-type(5):before { content: "Contact";}
  td:nth-of-type(6):before { content: "EDIT";}
  td:nth-of-type(7):before { content: "DELETE";}
}