Die Lehrkraft, kann die Arbeitsergebnisse ihrer Schülerinnen und Schüler als Tabelle anzeigen lassen - die Mitglieder der Gruppe untereinander, die Aufgabenkategorien nebeneinander - Bei zukünftig 35 Aufgabenkategorien kann diese recht breit werden. Ich versuche, die Spaltenbreite für die Aufgaben zu begrenzen. Der Titel ist um gedreht. Dabei bleibt der Text aber nicht in der Mitte, sondern ist weiter rechts. Ich zeige das mal in einem Screenshot:
... obwohl man im Inspektor sehen kann, dass "Ergänzen" ausgewählt ist, steht der Text weiter links.
Sobald ich den Maßstab verändere (Scrollrad) hupst der Text an die richtige Stelle und bleibt da auch bei verschiedenen Vergrößerungen - jetzt ist die Spalte aber zu breit und das lässt sich nicht ändern:
Mein Template:
Code: Alles auswählen
<!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' %}">⌂ 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>Ich dachte, wenn ich der Tabelle eine definierte Breite geben würde, könnte ich das Problem vielleicht lösen, habe dazu aber keine Lösung gefunden.
