Tabelle responsive mit Childfunktion soll einen Zeilenumbruch

  • 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:

    pasted-from-clipboard.png



    So soll es aussehen im breiten Fenster:

    pasted-from-clipboard.png

  • Hi,


    Also ich bin nicht der große Experte und es führen bekanntlich viele Wege nach Rom. Meine Vorschläge:


    - Entweder im html an den von Dir definierten Positionen direkt ein <br> tag.
    Vorteil: Der Zeilensprung wird konkret von Dir vorgegeben, egal ob responsive oder nicht.

    Nachteil: Die Zeilenbreite kann unterschiedlich sein zu den anderen Zeilenbreiten, die textlich nur eine Zeile benötigen. Dies kann man aber auch "herrichten".


    - Oder Du fixierst im responsiven Teil die Spaltenbreite, damit die Tabelle genauso aussieht wie Du Sie haben willst.

    Vorteil: Du defnierst die Spaltenbreite, nicht die "Umstände" der Geräte

    Nachteil: Mit fixierter Spaltenbreite kann es sein, dass andere Texte "doof" aussehen.


    Wie gesagt: Nur meine 5 cents als Anfänger. Die Experten haben da sicher andere und auch bessere Ideen.

  • Kleine Korrektur:


    habe den Code oben mal kurz in den Editor kopiert und festgestellt, dass ich auf dem Holzweg war.


    Mit dem <p> tag bekommst Du das ganze sehr einfach hin. Hier der Code (allerdings habe ich die Korrektur nicht für alle Zeilen gemacht! Rest musst Du selber machen. Auch der Textzeilenabstand ist vermutlich nicht das was Du willst. Aber das kannst Du ja einfach über CSS lösen:



    Ich hoffe Dir ein bischen geholfen zu haben.

    Nur so am Rande: Die Art der Codierung: CSS in HTML, etc. ist etwas gewöhnungsbedürftig.