Formatierung einer Tabelle

Diskutiere Formatierung einer Tabelle im CSS Forum im Bereich Programmierung; Hallo Leute, ich habe mich hier neu angemeldet, da ich Hilfe in CSS brauche. Ich bin Newbie und habe mich jetzt etwas in HTML und CSS...
P

pitwheazle

New member
Beiträge
3
Punkte Reaktionen
0
Hallo Leute,
ich habe mich hier neu angemeldet, da ich Hilfe in CSS brauche. Ich bin Newbie und habe mich jetzt etwas in HTML und CSS eingearbeitet und bin am Erstellen eines Projektes zum Üben von Matheaufgaben. Das existiert schon als PC Projekt (https://medien.bildung.hessen.de/rechentrainer/index.html), ich will es jetzt mittels Django auch webbasiert erstellen. Die Schülerinnen und Schüler melden sich an und verlinken sich mit ihrer Lehrkraft. Diese kann ihre Arbeitsergebnisse in Form einer Tabelle einsehen. Die Schülerinnen und Schüler in Zeilen untereinander, die Aufgabenkategorien in Spalten nebeneinander. Das funktioniert soweit. Es werden aber irgendwann mal bis zu 35 Aufgabenkategorien, die nebeneinander dargestellt werden sollen und die Spalten sollen aus diesem Grunde nicht so breit sein. Die Beschriftung im Titel habe ich daher gedreht. Wenn ich das anzeigen lasse, ist dieser Titel aber nach links versetzt. Ich zeige das mal in einem Screenshot (Tabelle 1):
Tabelle 1.jpg
Wie man im Inspektor sehen kann, ist der Text "Ergänzen" ausgewählt, er steht aber links vom Rahmen.
Wenn ich kurz die Ansicht zoome, springt der Text an die richtige Stelle, die Spalten sind aber zu breit. Das bleibt auch so, wenn ich das Bild beliebig vergrößere oder verkleinere. Siehe hier (Tabelle 2):
Tabelle 2.jpg
Meine Idee wäre es, der Breite der Tabelle einen festen Wert zu geben. Dazu bin ich aber noch nicht fündig geworden.

Mein Template:
HTML:
<!DOCTYPE html>
{% load static %}
<html lang="de">
<head>   
    <title>Rechentrainer im Web</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static 'styles.css' %}">
    <style>
        table{
            }
        thead {line-height: 100px;
        }
        th {
            text-align: center;
            padding: 5px;         
        }
    </style>
</head>
<header>
    <div class="navbar">
        <a href="{% url 'index' %}">&#8962 Home</a>
        <a>{{titel}}</a>
    </div>
</header>
<body>
<table>
    <thead>
        <tr>
            <th style="width: 200px;">Name</th>
            <th style="width: 20px;">Zeit</th>
            <th style="width: 25px;">Summe</th>
            {%for kategorie in kategorien %}
                <th style="width: 20px;  writing-mode: vertical-rl; transform: rotate(180deg); vertical-align: top; {{kategorie.farbe}}">
                    {{kategorie.name|truncatewords:1}}
                </th>
            {%endfor%}
        </tr>
    </thead>
    <tbody>
        {% for schueler, dauer, aufgaben in aufgaben_der_schueler %}
            <tr >
                <td style="text-align: left";>
                    <a  class="button" href="{% url 'mein_schueler' schueler.id %}">{{schueler.vorname}} {{schueler.nachname}} {{schueler.klasse}}</a></td>
                <td>{{dauer}}</td>
                {% for quote, anzahl in aufgaben %}
                    <td class="{{quote}}">{{anzahl}}</td>
                {% endfor %}
                </td>
            </tr>
        {% empty %}
            <tr><td colspan="999"><strong>Es sind noch keine Schüler angemeldet.</strong></td></tr>
        {% endfor %}
    </tbody>
</table>
</body>
</html>
Mein Projekt wird zwar mittels Django erstellt, es handelt sich aber wohl um ein HTML CSS Problem. Denkt dran: Ich bin ein ziemlicher Newbie. (Wie postet man hier normalerweise Code?)
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
Wie postet man hier normalerweise Code?
Anscheinend hast Du es schon selbst heraus gefunden. Oder hat ein Moderator den Code formatiert?

Ich dachte erst, das Ganze sei eine Kleinigkeit aber damit habe ich mich anscheinend getäuscht. Das Problem konnte ich im Firefox reproduzieren und ich habe den Eindruck gewonnen, dass hier ein Fehler im FF vorliegt. Das Verfahren mit dem writing-mode hat den Vorteil, dass sich die Höhe abhängig von der Textlänge anpasst. Geht man auf das bewährte transform: rotate(-90deg); zurück, geht dieser Vorteil verloren.
Das ist ein wenig unbefriedigend aber ich habe trotzdem eine Lösung gemacht wo Javascript die Höhe entspr. dem längsten Text berechnet:
Code:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>Tabelle mit senkrechter Beschriftung</title>
    <style>
        th {
            padding: 5px;
            background-color: lightblue;
            border: 1px solid white;
            display: flex;
            align-items: flex-end;
        }

        thead tr {
            display: flex;
            align-items: flex-end;
        }

        th.vertical {
            max-width: 1em;
        }

        th.vertical span {
            display: inline-block;
            max-width: 100%;
            transform: rotate(-90deg);
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Zeit</th>
                <th>Summe</th>
                <th class="vertical"><span>Ergänzen</span></th>
                <th class="vertical"><span>Addieren</span></th>
                <th class="vertical"><span>Subtrahieren</span></th>
            </tr>
        </thead>
    </table>
    <script>
        let maxHeight = 0;
        document.querySelectorAll('th.vertical span').forEach(item => {
            if (item.scrollWidth > maxHeight) {
                maxHeight = item.scrollWidth;
            }
        });
        document.querySelectorAll('th').forEach(item => {
            item.height = maxHeight + 'px';
        });
    </script>
</body>

</html>
 
P

pitwheazle

New member
Beiträge
3
Punkte Reaktionen
0
Hallo @Sempervivum (Hauswurz oder kleines Latinum?),
vielen herzlichen Dank für deine Mühe!
Nein, ich weiß immer noch nicht, wie man hier Code postet.
Mir ist es nicht gelungen meine Schleife über die Kategorien mit deinem span zu formatieren - mir wird immer nur die erste Spalte angezeigt.
Ich habe jetzt aber infolge deines Hinweises auf den Einfluss von writing-mode noch etwas rumprobiert und die Lösung gefunden. Das Problem war "thead {line-height: 100px". Wenn ich das weglasse passt alles. Eigentlich klar, line-hight legt die Höhe der Zeile fest, diese wird ja aber um 90° gedreht.
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
Nein, ich weiß immer noch nicht, wie man hier Code postet.
Das kleine Menüsymbol rechts von dem Landschaftssymbol in der Werkzeugleiste oben und dann </>.

Hauswurz oder kleines Latinum?
Primär ersteres, aber das kleine Latinum habe ich vor laaanger Zeit auch mal gemacht.
 
P

pitwheazle

New member
Beiträge
3
Punkte Reaktionen
0
Sonderbar, dass "Videos einfügen" direkt angeklickt werden kann, die Einfügeoption für Code aber versteckt ist.
 
Thema:

Formatierung einer Tabelle

Oben Unten