Ankündigung

Einklappen
Keine Ankündigung bisher.

Tabelle Kursplan responsive

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Tabelle Kursplan responsive

    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
    Angehängte Dateien

  • #2
    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.
    Zuletzt geändert von arnego2; 19.12.2020, 13:54.
    https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

    VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

    Kommentar


    • #3
      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.

      Kommentar


      • #4
        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

        Kommentar


        • #5
          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:
          Code:
          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.

          Kommentar


          • #6
            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
            FindeLinks.de - Kurzinfos mit Linkempfehlung
            Homepage-FAQs.de - seit Ende 2020 offline

            Kommentar


            • #7
              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*
              Zuletzt geändert von Megabyte; 20.12.2020, 00:24.

              Kommentar


              • #8
                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.

                Kommentar


                • #9
                  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
                  PS: Wenn euch mein Post gefallen hat, dann lasst mir ein "Daumen hoch" da!

                  Kommentar


                  • #10
                    Zitat von Localfu Beitrag anzeigen
                    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.

                    Kommentar


                    • #11
                      Zitat von Lupus_III Beitrag anzeigen

                      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

                      Kommentar


                      • #12
                        Zitat von Jens Koenig Beitrag anzeigen



                        PS: Bin mir nicht sicher ob ich den Link posten darf
                        Wie darf ich denn das verstehen?

                        Kommentar


                        • #13
                          die überempfindliche Spam Sperre sperrt uns gern mal zu viel.
                          Zuletzt geändert von arnego2; 22.12.2020, 00:18.
                          https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

                          VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

                          Kommentar


                          • #14
                            Zitat von arnego2 Beitrag anzeigen
                            die überempfindliche Spam Sperre sperrt uns gern man zu viel.
                            Daran habe ich jetzt nicht gedacht, ist aber auch ein Argument ;-)

                            Kommentar

                            homepage-forum.de - Hilfe für Webmaster! Statistiken

                            Einklappen

                            Themen: 56.802   Beiträge: 430.056   Mitglieder: 28.555   Aktive Mitglieder: 54
                            Willkommen an unser neuestes Mitglied, Fohlenfan.

                            Online-Benutzer

                            Einklappen

                            276 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 271.

                            Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                            Die neuesten Themen

                            Einklappen

                            Die neuesten Beiträge

                            Einklappen

                            Lädt...
                            X