1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Tabelle wird auf dem Smartphone abgeschnitten

Dieses Thema im Forum "Allgemeines" wurde erstellt von Muamicus, 13. März 2019.

  1. Muamicus

    Muamicus Well-Known Member

    Registriert seit:
    12. August 2013
    Beiträge:
    153
    Zustimmungen:
    1
    Hallo,

    ich bastele an einer Website für einen Bekannten:
    http://relax-ferienhaus.com/herzlich-willkommen/belegung-2019/

    Er möchte unbedingt die html Tabelle behalten :(

    Problem ist jetzt, dass die Tabelle seitlich auf dem Tablet / Smartphone / kleinem Viewport abgeschnitten wird.

    Wie bekomme ich das im CSS hin, dass die Tabelle seitlich scrollbar ist?


    Vielen lieben Dank :)
     
  2. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Du gibst dem DIV in dem die Tabelle sitzt ein overflow-x: scroll;
     
    Muamicus gefällt das.
  3. Muamicus

    Muamicus Well-Known Member

    Registriert seit:
    12. August 2013
    Beiträge:
    153
    Zustimmungen:
    1
    Habe es eingebaut, wird trotzdem auf dem Smartphone noch seitlich abgeschnitten ?
     
  4. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Natürlich wird sie abgeschnitten. Aber jetzt kannst Du sie scrollen.
     
    Muamicus gefällt das.
  5. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Und von max-width auf dem div habe ich nicht geschrieben.
     
    Muamicus gefällt das.
  6. Muamicus

    Muamicus Well-Known Member

    Registriert seit:
    12. August 2013
    Beiträge:
    153
    Zustimmungen:
    1
    Vielen Dank!

    Es lag an der vorgegebenen Breite im div, deshalb konnte ich nur ein Stück scrollen.

    Das die Tabelle auf voller Breite (voller viewport) ganz angezeigt wird, aber auf kleinem viewport scollbar ist, wird nicht so einfach gehen, oder ?
     
  7. Muamicus

    Muamicus Well-Known Member

    Registriert seit:
    12. August 2013
    Beiträge:
    153
    Zustimmungen:
    1
    Hatte es rausgenommen. Das war vom herumexperimentieren :)
     
  8. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Du gibst dem div eine neue Klasse, z.B. .scroll-table und definierst dann den overflow-x für die Klasse mit einer Mediaquery.
     
  9. Muamicus

    Muamicus Well-Known Member

    Registriert seit:
    12. August 2013
    Beiträge:
    153
    Zustimmungen:
    1
    Ich habe den 1 div mit .class-table benannt.

    Für testzwecke habe auf der Seite folgendes css geschrieben:


    <style type="text/css">
    @Media screen and (max-width: 400px) {
    .scroll-table {overflow-x: scroll;}
    }
    </style>

    nur wird es leider ignoriert.
    Was mache ich hier falsch?
     
  10. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    Also ich sehe auf dem DIV die CSS Klasse 'scroll-table'.

    Media gehört klein geschrieben und 400px ist zu wenig, da die Tabelle ja 1200px breit ist:

    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    Muamicus gefällt das.
  11. Muamicus

    Muamicus Well-Known Member

    Registriert seit:
    12. August 2013
    Beiträge:
    153
    Zustimmungen:
    1
    Danke, hatte es hier falsch geschrieben (was die class und media betrifft) auf der Seite war es richtig.

    Hatte mit den 400px ein Denkfehler.

    Sinngemäß heist es, wenn der viewport kleiner als 1200px wird, setzt overflow-x:scroll; ein ?
    Habe ich das so richtig verstanden?
     
  12. mensmaximus

    mensmaximus Well-Known Member

    Registriert seit:
    24. Juli 2014
    Beiträge:
    8.857
    Zustimmungen:
    437
    richtig
     
    Muamicus gefällt das.
  13. Muamicus

    Muamicus Well-Known Member

    Registriert seit:
    12. August 2013
    Beiträge:
    153
    Zustimmungen:
    1
    Vielen Dank.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden