.tablescol {
	
}

 @media screen and (max-width: 600px) {
    /* Force table not to behave like a table anymore */
    .tablescol table, .tablescol thead, 
	 .tablescol tbody, .tablescol th, 
	 .tablescol td, .tablescol tr {
      display: block;
    }
    
    /* Hide header, but keep for screen readers */
    .tablescol thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }
    
    .tablescol tr {
      margin-bottom: 15px;
      border: 0 solid #ccc;
    }
    
    .tablescol td {
      /* Behave like a row */
      border: none;
      border-bottom: 0 solid #eee;
      position: relative;
      padding-left: 0%;
    }
    
    /* Label the data using data-title attribute */
    .tablescol td::before {
      position: absolute;
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      content: attr(data-title);
      font-weight: bold;
    }
  }