<table>
  <caption>Brutto/Netto-Umrechnungen für das Jahr 2015</caption>
  <thead>
    <tr>
      <th>Bruttolohn</th>
      <th>Lohnsteuer</th>
      <th>Sozialversicherung</th>
      <th>Nettolohn</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="Bruttolohn">€ 1200</td>
      <td data-th="Lohnsteuer">€ 2,82</td>
      <td data-th="Sozialversicherung">€ 180,84</td>
      <td data-th="Nettolohn">€ 1.016,34</td>
    </tr>
    <tr>
      <td data-th="Bruttolohn">€ 1700</td>
      <td data-th="Lohnsteuer">€ 139,20</td>
      <td data-th="Sozialversicherung">€ 307,19</td>
      <td data-th="Nettolohn">€ 3200</td>
    </tr>
    <tr>
      <td data-th="Bruttolohn">€ 2300</td>
      <td data-th="Lohnsteuer">€ 318,63</td>
      <td data-th="Sozialversicherung">€ 415,61</td>
      <td data-th="Nettolohn">€ 1.565,76</td>
    </tr>
    <tr>
      <td data-th="Bruttolohn">€ 2800</td>
      <td data-th="Lohnsteuer">€ 481,22</td>
      <td data-th="Sozialversicherung">€ 505,96</td>
      <td data-th="Nettolohn">€ 1.812,82</td>
    </tr>
  </tbody>
</table>
body {
  margin: 1em;
  background: #f7f7f7;
}

table {
  width: 100%; 
  border-spacing: 3px;
  border-collapse: separate;
}

th:first-child, 
td:first-child {
  color: white;
  font-weight: bold;
  background: #86c72a;
}

th,
td {
  padding: .75em;
  text-align: center;
  background: white;
}

@media screen and (max-width: 640px) {
  thead {
    display: none;
  }

  td {
    display: block;
    position: relative;
    padding-left: 50%;
    margin-bottom: 3px;
    text-align: right;
    
    &:first-child {
      font-weight: bold;
    }
    
    &:before {
      content: attr(data-th);
      position: absolute;
      top: .75em;
      left: .75em;
      width: 50%;
      font-weight: inherit;
      text-align: left;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.