Tabelle Kursplan responsive

[Lupus_III]

Hallo zusammen, ich stehe vor der Aufgabe einen Kursplan ( Screenshot des Musterplans anhängend) in eine Webseite zu integrieren. Ich denke die Aufgabe entweder per <table> oder Flexbox zu lösen. Hat jemand eine Idee, wie man die Tabelle für kleine Displays aufbereiten kann? Ist hier eine zweite Version des Kursplans mit vertikaler Anordnung in die Webseite zu integrieren und bei großen Displays die Css-Anweisung dispaly: none; zu setzen die zielführende Lösung. Gibt es Alternativen, an die ich noch nicht gedacht habe?
kurse.png

[arnego2]

Ich glaube es gibt Grenzen mit Mobilem Design, Tabellen sind darunter.
https://css-tricks.com/responsive-data-tables/
der sollte dir weiterhelfen. Auch wenn es von 2011 ist.

[MrMurphy]

Eine Lösung ist nicht ganz einfach.

Doppelte Daten sollten vermieden werden. Wenn die sich nicht vermeiden lassen sollten möglichst die variablen oder sich häufig ändernden Daten nur einmal vorkommen. In deinem Fall also Kurs 1, Kurs 2.

Die Tage werden sich wahrscheinlich nie (außer dass vielleicht der Samstag wegfällt) oder nur selten ändern (die Uhrzeiten).

Als HTML-Element erscheint mir für einen Kurs- oder Stundenplan das dl-Element mit seinen Unterelementen div, dt und dd am geeignetsten. Die Gestaltung dann wie in HTML üblich mittels Flexbox oder CSS-Grid.

[Testie]

Ein Kalender ist ja vom Prinzip nichts anderes als deine Kurstabelle.

Hier vielleicht mal ein Anstoß: https://codepen.io/chrisdpratt/pen/OOybam

Ich würde die Tabelle, aber einer gewissen breite dann so verändern wie in dem Beispiel, oder eben ein neues Element zeichnen lassen und die alte auf hidden setzen,
Montag
16:00 Kurs 1
17:00 Kurs 2
Dienstag
8:00 Kurs 3
...
...

Viele Grüße

[Sempervivum]

In diesem speziellen Fall würde ich es nicht auf Biegen und Brechen nur mit HTML und CSS machen sondern abhängig von der Breite des Viewports das HTML mit Javascript generieren. Wenn man es z. B. so anordnet:

Uhrzeit Montag Dienstag
15:00   Kurs1   Kurs2
16:00   Kurs3   Kurs4
17:00   Kurs5   Kurs6

würde es ausreichen, die Anzahl der Spalten als Konstante zu definieren und das HTML generieren. Und für die no-JS-Phobiker könnte man eine statische Version anlegen nur mit Uhrzeit und einem Wochentag, das wäre dann auch ohne JS lesbar.

[daniel5959]

Hallo,

CSS ist ja nicht mein Ding, aber wie wäre es mit ...

Scrollende Tabellen mit fester 1. Spalte

Die Entwickler von ZURB haben ein Framework für Responsive Tables veröffentlicht mit dem Tabellen per JavaScript und CSS für kleine Bildschirme optimiert werden können. Das Script lässt sich sehr einfach integrieren und passt die Darstellung der Tabelle über den z-index an. Die erste Spalte der Tabelle wird auf eine eigene Ebene ausgelagert und fest positioniert. Die anderen Tabelleninhalte können horizontal unter dieser Ebene gescrolled werden.

Quelle: https://blog.kulturbanause.de/2012/0...ive-webdesign/

... dann würde die Spalte mit den Zeiten fest stehen bleiben und die Wochentage würde horizontal gescrollt.

daniel5959

[Megabyte]

Hallo, hier mein Senf dazu :-)

Leider fehlt mir die Quintessenz was von der Tabelle primär in Sicht bleiben muss, was ausgeblendet/versteckt/außerhalb viewport liegen kann und wie bzw. wann diese Info dann vorliegen muss...
Wichtig wäre auch zu wissen wo die Quelle der Tabelle ist. Wenn es eine "fertige" HTML-Datei sein soll die verteilt/aufgerufen wird sind die Möglichkeiten deutlich beschränkter als wenn
die Tabelle von einem Server aufgerufen wird. Da könnte man dann z.B: mit php die gerade benötigten Inhalte schön aufbereiten ohne die ganze Woche bereits vorliegen zu haben...

Zu dem z-index-Ansatz: Yepp. Aber dazu braucht es kein Framework von einem Entwickler :-). position fixed mit x und y, z-index > 0 -> fertig ist das "Framework" *muahahaha*.
Sollte also stets die linke bzw. obere Reihe/Spalte im Blickfeld bleiben wäre dies ein denkbarer Ansatz. Da es scheinbar primär auf Mobilgeräte zielt würde ich JavaSript nicht verwenden.
Zu viel Versionsvarianz bei Browsern und Prozessoren (nicht vergessen: JS ist clientseitig).

Sehr gute Möglichkeiten sehe ich da wirklich in "position/fixed" für Titel oder Tagesspalten, den restlichen Tabellenaufbau aber nicht mit <table> sondern display flex mit 7 div's (Tage) in einem Wrapper
um eine Woche abzubilden. Um je 4 Wochen (ein Monat) einen weiteren wrapper um den Monat zu "bündeln". Das wäre (theoretisch) bequem machbar, deutlich eleganter zu handhaben
(hat hier schon mal einer unter 100te </td><td> genau seine Spalte zum editieren gefunden? *lol*) und per css auch sehr flexibel.

Die div's noch ordentlichen ID-en und schon könnte man hier auch prima über object/innerHTML dann die Inhalte recht elegant updaten.


Elegantere Lösung (aber in der Umsetzung klein bisschen komplexer):

Zeig links permanent die Zeiten und rechts daneben EINEN Tag. Die rechte (Tag)-Spalte bekommt dann ein "Hamburger-Menü" und man holt sich dann den gewünschten Tag aus dem
Menü neben seine Zeiten. Das wäre unheimlich schmal aufbaubar, wenn die Info aber nicht von einem Server kommt sondern bereits komplett hinterlegt sein muss dann braucht es
paar "Verstecken"-Tricks um die nicht benötigten Tage zu kaschieren. Könnte mir da eine große Tabelle vorstellen bei der nur der gewünschte Tag zu sehen ist (Rest wäre overflow: hidden).
Den Tagen jeweils eine ID (z.B. #mo, #di...) verpassen und mit Pseudoklasse (:target auf die ID) per Menü in den darstellenden Bereich holen. Rest wäre mit overflow: hidden wieder
versteckt und es wird immer nur der Tag neben der Zeitschiene zu sehen sein den man per (Hamburger-) Menü sich auswählt... Finde den Ansatz gut *lol*


Wow, ist mehr Text geworden als ich vorhatte - Sorry für's zutexten *lol* - Ich arbeite an mir *lol*

[Lupus_III]

Wow!!! Danke erst mal für die zahlreichen Vorschläge. Ich werde mich mal durchwursteln und das für mich beste Ergebnis dann verwenden. Schönen Sonntag Euch allen.

[Localfu]

Hi Lupis,
es gibt kein Responsive Tabellen. Das ist nicht machtbar. Nicht wegen der Technik, sondern es ist unlogisch. Die einzige Lösung für das Problem wäre den Bildschirm zu drehen, aber Tabellen die für Desktop-Anzeige konzipiert sind lassen sich nicht responsive machen. Was du machen könntest wären smarte Tabellen zu bauen, die bestimmte Werte verdecken ggf. einblenden. In deinem Fall wäre sowas sogar sehr praktisch. Smarte Tabellen finden sich auf etöiche Seiten im Netz wieder und benutzen unterschiedliche Methoden zum Anzeigen von Daten.

LG
Localfu

[Lupus_III]

Smarte Tabellen finden sich auf etöiche Seiten im Netz wieder und benutzen unterschiedliche Methoden zum Anzeigen von Daten.

LG
Localfu

Kennst Du Beispiele? Ich habe das hier gefunden. - https://rueckgrat-donau.de/kursplan
Soweit ich da durchsteige haben die zwei Versionen ihres Kursplans angelegt. Eine für große und eine für kleine Bildschirme.

[Jens Koenig]

Kennst Du Beispiele? Ich habe das hier gefunden. - https://rueckgrat-donau.de/kursplan
Soweit ich da durchsteige haben die zwei Versionen ihres Kursplans angelegt. Eine für große und eine für kleine Bildschirme.

Moin,

naja 2 Versionen nicht, sonst wäre ja eine 2. Seite von Nöten.
Ist über CSS gesteuert und Du kannst es ganz gut sehen wenn Du dir deren CSS mal rein ziehst :-)

LG Jens

PS: Bin mir nicht sicher ob ich den Link posten darf

[Lupus_III]

PS: Bin mir nicht sicher ob ich den Link posten darf

Wie darf ich denn das verstehen?

[arnego2]

die überempfindliche Spam Sperre sperrt uns gern mal zu viel.

[Jens Koenig]

die überempfindliche Spam Sperre sperrt uns gern man zu viel.

Daran habe ich jetzt nicht gedacht, ist aber auch ein Argument ;-)