SOURCE

<table class="cars">
  <caption>tesla car models</caption>
  <thead>
    <tr>
      <th scope="col">model</th>
      <th scope="col">top spped</th>
      <th scope="col">range</th>
      <th scope="col">length</th>
      <th scope="col">width</th>
      <th scope="col">weight</th>
      <th scope="col">price</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">model s</th>
      <td data-label="top spped">1111</td>
      <td data-label="range">1111</td>
      <td data-label="length">1111</td>
      <td data-label="width">1111</td>
      <td data-label="weight">1111</td>
      <td data-label="price">1111</td>
    </tr>
    
    <tr>
      <th scope="row" data-label="model">roadster</th>
      <td data-label="top spped">222</td>
      <td data-label="range">222</td>
      <td data-label="length">222</td>
      <td data-label="width">222</td>
      <td data-label="weight">222</td>
      <td data-label="price">222</td>
    </tr>
  </tbody>
</table>

.cars {
  width: 100%;
  border-collapse:collapse;
}

.cars caption {
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.cars tr:nth-child(even) {
  background-color: #eee;
}

.cars caption,
.cars th,
.cars td {
  text-align: left;
  padding 0 0.5em;
  line-height: 2;
}

.cars thead {
  border-bottom: 2px solid;
}

@media only screen and (max-width: 760px) {
  .cars {
    display: block;
  }
  
  .cars thead {
    display: none;
  }
  
  .cars tr {
    border-bottom: 1px solid;
  }
  
  .cars td, .cars th {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 100%;
  }
  
  .cars th {
    font-weight: 600;
    border-bottom: 2px solid;
    padding-top: 10px;
  }
  
  .cars td:before {
    width:30%;
    display: inline-block;
    font-style:italic;
    content: attr(data-label)":";
  }
}