Responsive Tabelle Übersicht

Thema wurde von Graubuntschwarz, 3. Februar 2021 erstellt.

  1. Graubuntschwarz

    Graubuntschwarz Mitglied

    Registriert seit:
    5. August 2020
    Beiträge:
    9
    Danke erhalten:
    0
    Guten Abend,

    ich suche nach einer etwas eleganteren Lösung für meine Stoffübersicht.
    Bin absoluter Laie und hatte mir den Code einer dreispaltige Tabelle aus dem Netz kopiert. In Desktop- sowie Handyansicht bin ich auch vollkommen zufrieden. Da passt sich die Tabelle gut an. Aber auf dem Tablet sieht es einfach nur furchtbar aus.
    Kann mir da vielleicht jemand einen Tipp geben, wie ich das eleganter/schöner lösen kann??

    Liebe Grüße

    https://www.graubuntschwarz.de/info/stoffuebersicht.html
     

    Anhänge:

  2. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    WEnn du das so in Spalten machen mcöchtest, solltest Du keine festen Größen verwenden.
    ....
    <div class="col-xs-12 col-sm-4" style="padding: 2.5%; text-align: center;">
    <span style="font-family:verdana,geneva,sans-serif;"><img alt="" src="images/Bed of Roses_2.JPG" class="img-responsive"><br>
    ....

    Und keine Leerzeichen in den Bildnamen


    Wobei es vielleicht schöner wäre, wenn man das in der kleineren Größe nicht in 3 Spalten, sondern nur 2 Hätte, dazu müsste man aber den Code ändern.


    P.S. Bei Sunny Smile ist Dir der Text verrutscht
     
  3. Graubuntschwarz

    Graubuntschwarz Mitglied

    Registriert seit:
    5. August 2020
    Beiträge:
    9
    Danke erhalten:
    0
    Was meinst du genau mit Leerzeichen in den Bildnamen?
    Hättest du eventuell auch eine Idee, wie ich es ohne Tabelle lösen kann?
    Ich bin da für alles offen. Diese Seite treibt mich noch in die Verzweiflung
     
  4. Anonymous

    Anonymous Mitglied

    Registriert seit:
    2. November 2014
    Beiträge:
    24
    Danke erhalten:
    0
    Danke vergeben:
    12
    Ich habe ein ähnliches Problem.
    Ich füge über die Auswahlleiste eine Tabelle in der Artikelbeschreibung ein, allerdings bekomme ich diese auch nicht responsive hin. Sieht überall etwas anders aus.
     

    Anhänge:

  5. FRAGO

    FRAGO Erfahrener Benutzer

    Registriert seit:
    5. Dezember 2019
    Beiträge:
    1.009
    Danke erhalten:
    319
    Danke vergeben:
    185
    Grundsätzlich sind Tabellen in der heuten Zeit zu vermeiden! Es gibt für fast jede Anforderung eine passende Lösung.

    @Graubuntschwarz ... in deinem Fall würde ich mir mal das anschauen https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_wrap das solltest du sehr einfach auch auf deine Anforderung anpassen können.

    @Gefässerie ... auch für sowas gibt es Lösungen, jedoch würde das den Rahmen hier jetzt sprengen.
    Eine quick and dirty Lösung wäre du packst die Tabelle in einen DIV Container und sogst dafür das man die Tabelle auf der Handyansicht hin und her schieben kann.

    [HTML CODE]
    HTML:
    <div class="table-scrollable">
      <table>
        …
      </table>
    </div>
    [CSS Code]
    Code:
    .table-scrollable {
      width: 100%;
      overflow-y: auto;
      margin: 0 0 1em;
    }
    
    .table-scrollable::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 14px;
      height: 14px;
    }
    
    .table-scrollable::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 3px solid #fff;
      background-color: rgba(0, 0, 0, .3);
    }
     
  6. M. Zitzmann

    M. Zitzmann Erfahrener Benutzer

    Registriert seit:
    3. März 2016
    Beiträge:
    367
    Danke erhalten:
    118
    Danke vergeben:
    39
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.349
    Danke erhalten:
    573
    Danke vergeben:
    506
    @Graubuntschwarz
    Du könntest zB deinen Code, mit dem die Bilder eingebunden werden, so ändern, dass die Bilder nicht abgeschnitten werden.

    Code:
    <img class="img-responsive" alt="" src="images/Fairy Moment_1.JPG" style="width: 330px;">
    Dann sähe das erstmal so aus:
    upload_2021-2-4_10-26-26.png
     
  8. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    Wer ein bisschen mehr mit Gridwerten lernen will, da kann das hier helfen:
    (Link nur für registrierte Nutzer sichtbar.)

    Damit lassen sich ganz wunderbar Tabellen bauen.
    Man sollte aber immer darauf achten, wie das auf einem kleinen Handy angezeigt wird.
    Bei zu viel Text wird das Feld sehr hoch und eventuell auch unschön umgebrochen.
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.352
    Danke erhalten:
    11.198
    Danke vergeben:
    1.601
    #9 barbara, 4. Februar 2021
    Zuletzt bearbeitet: 4. Februar 2021
    Dein Bild heißt:
    Bed of Roses_2.JPG
    da wird dann im html z.B.
    Bed%20of%20Roses_2.JPG
    draus, deshalb sollte man bei Bildern keine Leerzeichen verwenden, ebenso wie umlaute oder Sonderzeichen.

    Zur Tabelle:
    Versuche es mal damit:
    HTML:
    <div class="row ">
    
        <div class="col-xs-12 col-sm-6 col-md-4">
            <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" />
    <p class="stoffe">Hier kommt Dein Text rein</p>
        </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
            <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" />
    <p class="stoffe">Hier kommt Dein Text rein</p>
        </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
            <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" />
    <p class="stoffe">Hier kommt Dein Text rein</p>
        </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
            <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" />
    <p class="stoffe">Hier kommt Dein Text rein</p>
        </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
            <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" />
    <p class="stoffe">Hier kommt Dein Text rein</p>
        </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
            <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" />
    <p class="stoffe">Hier kommt Dein Text rein</p>
        </div>
    
    </div>
    Du kannst da beliebig viele
    <div class="col-xs-12 col-sm-6 col-md-4">
    <img alt="Bild-Name" class="img-responsive" src="Pfad zum Bild" title="Bild-Name" />
    <p class="stoffe">Hier kommt Dein Text rein</p>
    </div>

    vor dem Letzen </div> einfügen.

    Ich würde da keine Bilder mit 800 x 800px einfügen, sondern nur welche mit 400 x 400px, das spart kb und somit Ladezeit

    Noch etwas vergessen:
    durch das <p class="stoffe"> kann man den Text über css stylen, (Größe, Farbe, Position, Abstand....)