<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;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.