Responsive Scrolling Tables: Für Joomla 4 nicht mehr verfügbar!

    Hallo


    Ich habe unter J3 das Plugin Responsive Scrolling Tables installiert.

    Der Grund: Ich habe mehrere Beiträge mit Tabellen deren Inhalt auf Mobilgeräten breiter ist als der Bildschirm.


    Dieses Plugin bewirkt, dass Tabellen auf Mobilgeräten horizontal hin- und her geschoben werden können um den ganzen Inhalt anzuzeigen.

    Zusätzlich kann oberhalb der Tabelle ein Text angezeigt werden... ZB: >>Scroll right for more...<<


    Dieses Plugin gibt es für J4 aber nicht mehr!!


    Ich habe schon sehr viel gesucht aber finde nichts vergleichbares... Es war ein einfaches plugin... Installieren, einstellen, fertig.

    Gibt es so etwas irgendwo für J4?


    Vielen Dank!!

    Der Plugin-Link von Stef sieht gut aus.

    Aber es geht auch händisch.

    In der Code-Ansicht des Beitrags wird die Tabelle von einem div umhüllt, das eine ID bekommt - bei mir "adressen"

    Code
    <div id="adressen">
<table> ..... </table> /* deine Tabelle */
</div>



    In die user.css (oder custom.css, wie sie halt in deinem Template heißt) kommen folgende Anweisungen:

    Code
    @media only screen and (max-width:959px){
#adressen{overflow-x:auto;}
#adressen::before{content:"Scroll right for more ..."; color:red; font-weight:bold;}
}

    Im CSS gibst du die Maximalbreite der Geräte an, für die das Folgende gelten soll - bei mir z.B. 959px. [Zeile 1]

    Dann sagt man dem div #adressen, was es bei Überbreite machen soll: overflow-x:auto (=einen Scrollbalken) [Zeile 2]

    Zuletzt sagt man dem Browser, welche Botschaft er vor dem div #adressen hinschreiben soll: "Scroll right ... usw. " [Zeile 3]

    Dazu optional: Farbe und Schriftstärke.



    Jede weitere Tabelle, für die du die Funktion auch haben willst, bekommt eine andere ID.

    Diese setzt du dann zusätzlich mit Komma vor die bereits vorhandene CSS-Anweisung:


    #adressen, #termine, #veranstaltungen { ... }

    #adressen::before, #termine::before, veranstaltungen::before { ... }



    MfG

    Ute

    Ich habe das ebenfalls gelöst mit

    Code
    <table class="tableclass"> ..... </table>

    und entsprechend für unterschiedliche Tabellentypen unterschiedliche Klassen festgelegt. Jede Tabellenklasse bekommt dann in der user.css eine entsprechend individuelle "Behandlung", um responsives Verhalten sicher zu stellen,


    Die Extention "responsvie tables" hat leider nicht meine Tabellentypen abgedeckt .

    Gruß

    Heinz


    "Wer es nicht versucht schafft es auch nicht."

    Ja, da geht es dann auch nicht anders.

    Ich habe mir kürzlich die CSS für Tabellen angeschaut, deren Zeilen für schmale Displays in Spalten umgestapelt werden.

    Eine geeignete Tabelle hätte ich - wenn mir mal langweilig ist, probier ich's aus.

    :/


    Mfg

    Ute