body {
   padding: 1em;
   div.test {
      border: 1px solid grey;
      padding: 1em;
      margin: 0 2em 1em;
      table,
      tbody,
      td,
      th,
      thead,
      tr {
         border: 1px solid lightgrey;
         border-collapse: collapse;
      }
   }
}

@media only screen 
   and (max-width: 760px), (min-device-width: 768px) 
   and (max-device-width: 1024px) {
   
   table,
   tbody,
   td,
   th,
   thead,
   tr {
      display: block;
      border: 0;
   }
   
   /* Hide table headers (but not display: none;, for accessibility) */
   thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
   }

   tr {
      margin: 0 0 1rem;
   }

   tr:nth-child(odd) {
      background: #ccc;
   }

   td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
   }

   td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 0;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
   }
   /*
	Label the data
 You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
	*/
   td:nth-of-type(1):before {
      content: "First Name";
   }

   td:nth-of-type(2):before {
      content: "Last Name";
   }

   td:nth-of-type(3):before {
      content: "Job Title";
   }

   td:nth-of-type(4):before {
      content: "Favorite Color";
   }

   td:nth-of-type(5):before {
      content: "Wars of Trek?";
   }

   td:nth-of-type(6):before {
      content: "Secret Alias";
   }

   td:nth-of-type(7):before {
      content: "Date of Birth";
   }

   td:nth-of-type(8):before {
      content: "Dream Vacation City";
   }

   td:nth-of-type(9):before {
      content: "GPA";
   }

   td:nth-of-type(10):before {
      content: "Arbitrary Data";
   }
   
}