JSFiddle - React, Tailwind, and code Playground
HTML
HR: <hr class="frz-style"><br><br><br>
Tabelle:<br>
<table class="frz-desc">
<thead>
<tr><th>Größe</th><th>entspricht ca. EU Größe</th><th>Länge</th><th>Breite</th><th>Fußlänge min</th><th>Fußlänge max</th></tr>
</thead>
<tbody>
<tr>
<td data-th="Größe">S</td>
<td data-th="entspricht ca. EU Größe">bis zu 19</td>
<td data-th="Länge">11,5cm</td>
<td data-th="Breite">???</td>
<td data-th="Fußlänge min">???</td>
<td data-th="Fußlänge max">11cm</td>
</tr>
<tr>
<td data-th="Größe">S</td>
<td data-th="entspricht ca. EU Größe">bis zu 19.......................................</td>
<td data-th="Länge">11,5cm</td>
<td data-th="Breite">???</td>
<td data-th="Fußlänge min">???</td>
<td data-th="Fußlänge max">11cm</td>
</tr>
<tr>
<td data-th="Größe">S</td>
<td data-th="entspricht ca. EU Größe">bis zu 19</td>
<td data-th="Länge">11,5cm</td>
<td data-th="Breite">???</td>
<td data-th="Fußlänge min">???</td>
<td data-th="Fußlänge max">11cm</td>
</tr>
</tbody>
</table>
CSS
table.frz-desc {
border-spacing: 0;
border: 1px solid whitesmoke;
margin: 15px auto;
background: red;
text-align: left;
margin-left: 15px;
color: blue;
}
table.frz-desc th {
font-weight: bold;
background-color: whitesmoke;
}
table.frz-desc td {
background-color: white;
}
table.frz-desc tbody tr:hover {
color: darkgreen;
}
table.frz-desc th:first-child, td:first-child {
padding: 0 15px 0 15px;
}
table.frz-desc thead tr:last-child th {
border-bottom: 2px solid GhostWhite;
}
table.frz-desc tbody tr:last-child td {
border: none;
}
table.frz-desc tbody td {
border-bottom: 1px solid GhostWhite;
}
table.frz-desc td:last-child {
padding-right: 15px;
}
hr.frz-style {
border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
div.frz-mit-abstand {
padding-left: 20px;
padding-right:20px
}