Hallo Leute,
leider bekomme ich es nicht geschafft in einer responsive Tabelle einen Zeilenumbruch zu erstellen
Siehe Screenshot.
Hoffe jemand kann einem verzweifelten Hobbyprogrammierer helfen .... ;-D
Anbei der CSS/HTML Code.
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>responsive Tabelle</title>
<style>
table {
border-collapse: collapse;
}
td, th {
padding: 0.5em;
}
.ueberschriftfarbelinks {
color: coral;
text-align: left;
border-right: 2px solid black;
}
.ueberschriftfarberechts {
color: deeppink;
text-align: center;
}
td {
color: cadetblue;
text-align: center;
vertical-align: middle;
}
tr {
border-bottom: 2px solid black;
}
th:first-child {
padding-left: 0em;
}
th:last-child, td:last-child {
padding-left: 0em;
}
thead th {
border-bottom: 2px solid black;
}
tbody th {
font-weight: normal;
text-align: left;
vertical-align: middle;
}
.Leistung {
color: springgreen; /* volle Tabelle */
border-right: 2px solid black;
}
.after::after {
content: "\A";
white-space: pre;
}
@media screen and (max-width: 48em) {
thead {
display: none;
}
.Leistung {
color: pink;
border-right: none;
}
tr:first-child {
border-top: 2px solid black;
}
tr {
border-bottom: 2px solid black;
border-top: none;
border-left: none;
border-right: none;
padding: .5em 2em 1em;
}
th::before {
content: "Geigenunterricht pro Woche: ";
color: cyan;
}
td:nth-child(2)::before {
content: "€ pro Person pro Monat: ";
color: brown;
}
table, tbody, tr {
display: block;
}
tbody th {
display: block;
font-weight: bold;
}
td {
display: inline-block;
min-width: 30%;
padding: 0.2em 0.2em;
text-align: left;
border-top: none;
border-left: none;
border-right: none;
}
@media screen and (max-width: 33em) {
td {
display: block;
border-top: none;
border-left: none;
border-right: none;
}
tr {
padding: .5em .5em 1em;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="ueberschriftfarbelinks">Geigenunterricht in Krefeld<span class="after"></span> pro Woche</th>
<th class="ueberschriftfarberechts">Preis pro Person<span class="after"></span> pro Monat</th>
</tr>
</thead>
<tbody>
<tr>
<th class="Leistung">30 Minuten Probeunterricht</th>
<td>0€</td>
</tr>
<tr>
<th class="Leistung">30 Minuten Einzelunterricht</th>
<td>68€</td>
</tr>
<th class="Leistung">30 Minuten Gruppenunterricht (2 Personen)</th>
<td>48€</td>
</tr>
<tr>
<th class="Leistung">30 Minuten Gruppenunterricht (mehr als 2 Personen)</th>
<td>40€</td>
</tr>
<tr>
<th class="Leistung">45 Minuten Einzelunterricht</th>
<td>92€</td>
</tr>
<tr>
<th class="Leistung">45 Minuten Gruppenunterricht (2 Personen)</th>
<td>64€</td>
</tr>
<tr>
<th class="Leistung">45 Minuten Gruppenunterricht (mehr als 2 Personen)</th>
<td>52€</td>
</tr>
<tr>
<th class="Leistung">60 Minuten Einzelunterricht</th>
<td>128€</td>
</tr>
<tr>
<th class="Leistung">60 Minuten Gruppenunterricht (2 Personen)</th>
<td>88€</td>
</tr>
<tr>
<th class="Leistung">60 Minuten Gruppenunterricht (mehr als 2 Personen)</th>
<td>72€</td>
</tr>
</tbody>
</table>
</body>
</html>
So "soll" es aussehen im responsive/schmalem Fenster:
html-seminar.de/woltlab/attachment/1304/
So soll es aussehen im breiten Fenster: