Tabellen "echte" Responsivität verleihen (ohne Balken)

  • RESPONSIVE TABELLEN !


    Ich hab mich mal ein bisschen gespielt mit den Tabellen! In WSX5 ist es ja so, dass es für Tabellen einen Scrollbalken erzeugt bei kleineren Auflösungen und die Felder die gleiche Breite behalten. Wieso das INCO so gelöst hat...keine Ahnung! Wahrscheinlich um bei der Masse an verschiedenen Tabellen keine Fehler zu erzeugen bei Konvertierungen. Wie dem auch sei, gibt es einen einfachen CSS Code um das zu umgehen. Wobei dieser Code keine Generellösung ist für alle gestalteten Tabellen. (Man kann ihn ja, erweitern wenn nötig)


    Der Code dafür ist recht simpel und kann entweder nur für eine Seite (Eigenschaften der Seite, Reiter "Erweitert" vor dem </head> Tag) eingefügt werden, oder für alle Tabellen unter "4" Seo6Code Reiter "Erweitert" !




    Wobei die "max-width" auf die jeweilige Header Breite angepasst werden muss "minus 1px" ! In dem Beispiel ist der Header 1000px Breit !


    Siehe meine Beispiel http://www.webdesign-markersdo…/tabellen-responsive.html


    Das wäre es gewesen, wenn man aber viel Text hat in den Tabellen (oder mehrzeilig), dann schaut das natürlich bei kleinen Auflösungen nicht gut aus. Dazu gibt es einen erweiterten Code um die Tabelle untereinander anzuordnen und auf 100% zu setzen. Dazu ermittelt man den vorletzten Sprungpunkt (also vor dem letzten 480px) in meinem Fall ist es 720px ! Und ersetzt die "max-width" mit der eigenen Breite minus 1px !




    Bei zwei- oder mehrzeiligen Text in den Spalten kann es aber zu kleinen Fehlern kommen. Dazu gibt es einen kleinen JAvaskript Code den man unter der CSS platzieren kann um es auszubessen.





    Aber wie gesagt ist es für komplizierte Tabellen kein Generelcode sondern muss von Hand noch nachgebessert werden.


    NAchtrag für Bilder in den Tabellen:


    Code
    1. [tt]<style>table td a img {width:100% !important}table td {height:auto !important}</style>[/tt]



    Viel Spass beim probieren !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    3 Mal editiert, zuletzt von andy67 ()

  • Ist die Weihnachten zu langweilig geworden?
    Danke dafür, werde es gleich morgen testen. ;)

  • Hallo


    Auch wenn der Beitrag schon älter, jetzt habe ich diese Hilfe gebraucht.


    Danke Andy.


    Dieses Forum ist Spitze, zu fast alles Problemen findet die Suche eine Lösung.


    Gruß Rainer

  • Das hat schon fast perfekt geklappt, vielen Dank schonmal!


    Nur leider passt es noch nciht ganz auf eine Seite, sodass noch immer ein klein bisschen gescrollt werden muss. Wie kann ich denn herausfinden wo der letzte Sprungpunkt ist?

  • Unter responsive kannst du nachschauen. Man kann auch auf einen früheren Sprungpunkt floaten lassen. ICh weis aber nicht ob man die Umbrüche pro Sprungpunkt ändern kann in der EVO V13 !

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Ich bedanke mich.

    Habe den Code in der Version 2021.1.4

    verwendet und funktioniert super.

    Habe noch einen Sprungpunkt dazugemacht.


    DANKE!

  • Danke Andy,

    werde ich auch mal testen wenn ich wieder auf den Beinen bin. :-(

    Lg.

    Thabo-Umasai

    -----------------------------------------------------------------------------------------------------------
    "Was du heute kannst besorgen, das verschiebe nicht auf Morgen...."

    ;)

  • Hallo Andy

    Dieser Beitrag ist schon schon ein bisschen älter...

    Wollte mal fragen ob es statt die Zeile sich responsiv formiert es auch in einer Spalte möglich ist? Da meine Tabelle 10 Zeilen und 3 Spalten hat.

    Gibt es da eine andere Lösung?


    Gruss

    Cookie