Tabelle mittig ausrichten und für mobil optimieren

Thema wurde von super_kasse, 23. Juni 2019 erstellt.

  1. super_kasse
    super_kasse Aktives Mitglied
    Registriert seit:
    6. Juni 2019
    Beiträge:
    35
    Danke erhalten:
    0
    Danke vergeben:
    11
    Hallo zusammen,

    unser neu aufgebauter Shop steht jetzt und dank Barbara konnten wir schon vieles so umsetzten wie wir uns das vorgestellt haben. Vielen dank an dieser Stelle nochmal.
    Jetzt habe ich aber noch eine Frage zu der Tabelle auf unserer Startseite und der mobilen Optimierung dazu.
    Wie kann ich es machen das die Tabelle auf Desktop Geräten mittig angezeigt wird?
    Und was kann ich machen das die Tabelle auch mobil Optimiert wird, also am liebsten dann immer Spaltenweise untereinander?
    Oder gibt es eine andere bessere Lösung dafür?
    Vielen Dank schonmal für eure Hilfe.
    Der Link zu unserem Shop: https://www.superkasse.de/

    Liebe Grüße
    Sarah
     
  2. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    1. September 2012
    Beiträge:
    2.707
    Danke erhalten:
    513
    Danke vergeben:
    173
    Hallo Sarah,
    Du solltest dich für Deinen Shop unbedingt mit dem Thema Anti-Geoblocking befassen.

    Und Versandpreise ins Ausland auf Anfrage sind Abmahnfähig.

    Gruss
     
  3. super_kasse
    super_kasse Aktives Mitglied
    Registriert seit:
    6. Juni 2019
    Beiträge:
    35
    Danke erhalten:
    0
    Danke vergeben:
    11
    Wo kann ich das mit dem Versand ins Ausland abschlaten? Wir versenden nicht ins Ausland.
    Ok, da werde ich mich dann mal informieren wegen Anti-Geoblocking. Kannst du mir da schon ein bißchen as zu sagen? Haben wir was gravierendes irgendwo falsch gemacht?
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.616
    So in etwa wie bei mir hier?:
    (Link nur für registrierte Nutzer sichtbar.)

    kurze Erklärung:
    Die Zeile <div class="col-xs-12 col-md-6 col-lg-4"> bestimmt die Spaltenbreite auf dem Bildschirm
    col-xs-12 = Anzeige auf kleinen Geräten = ganze Breite,
    col-md-6 = auf Tablets = halbe Breite (2 Spalten nebeneinander),
    col-lg-4 = auf PCs = 1/3 Breite (3 Spalten nebeneinander)

    Wenn Du auch auf dem Tablet 3 nebeneinander haben möchtest, wäre col-md-4
    Bei nur einer Spalte col-md-12

    <th....>hier steht die Überschrift, gegebenenfalls mit Bild </th>
    <tr...>das ist die Zeile</tr>
    <td...> was in der Zeile steht</td>

    Da Du in Deiner Tabelle nur eine Aufzählung untereinander hast, wäre der Aufbau etwa so:
    Code:
    <div class="row">
        <div class="col-xs-12 col-md-6 col-lg-4">
            <table class="table table-striped table-features">
                <thead>
                    <tr>
                        <th colspan="2" style="font-size:16px; text-align: center; text-transform: unset;">
                        <img alt="" src="Pfad zu Deinem bild.png" />
                        Deine Überschrift Spalte 1
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1. Zeile</td>
                    </tr>
                    <tr>
                        <td>2. Zeile</td>
                    </tr>
                    <tr>
                        <td>3. Zeile</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
        <div class="dpd-list col-xs-12 col-md-6 col-lg-4">
            <table class="table table-striped table-features">
                <thead>
                    <tr>
                        <th colspan="2" style="font-size:16px; text-align: center; text-transform: unset;">
                        <img alt="" src="Pfad zu Deinem bild.png" />
                        Deine Überschrift Spalte 2
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1. Zeile</td>
                    </tr>
                    <tr>
                        <td>2. Zeile</td>
                    </tr>
                    <tr>
                        <td>3. Zeile</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
        <div class="col-xs-12 col-md-6 col-lg-4">
            <table class="table table-striped table-features">
                <thead>
                    <tr>
                        <th colspan="2" style="font-size:16px; text-align: center; text-transform: unset;">
                        <img alt="" src="Pfad zu Deinem bild.png" />
                        Deine Überschrift Spalte 3
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1. Zeile</td>
                    </tr>
                    <tr>
                        <td>2. Zeile</td>
                    </tr>
                    <tr>
                        <td>3. Zeile</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
     
  5. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    1. September 2012
    Beiträge:
    2.707
    Danke erhalten:
    513
    Danke vergeben:
    173
    Zu erwähnen das der Gambio-Link entfernt wurde und das LUCID dich auch nicht kennt.
     
  6. super_kasse
    super_kasse Aktives Mitglied
    Registriert seit:
    6. Juni 2019
    Beiträge:
    35
    Danke erhalten:
    0
    Danke vergeben:
    11
    Wir sind von dem Verpackungsgesetzt nicht betroffen, da wir nur an Gewerbetreibende verkaufen und zusätzlich unser Lieferant schon die Verpackungen angemeldet hat.
     
  7. super_kasse
    super_kasse Aktives Mitglied
    Registriert seit:
    6. Juni 2019
    Beiträge:
    35
    Danke erhalten:
    0
    Danke vergeben:
    11
    Vielen Dank Barbara, das werde ich die Tage mal ausprobieren und dann Rückmeldung geben.
    Zwischenzeitig habe ich es anderes gelöst, aber ich weiß nicht ob das richtig so ist und was Google davon hält. Vielleicht kannst du dir das nochmal kurz anschauen.
     
  8. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    1. September 2012
    Beiträge:
    2.707
    Danke erhalten:
    513
    Danke vergeben:
    173
    Ich verweise dazu besserwisserich auf:

    (Link nur für registrierte Nutzer sichtbar.)
     
  9. super_kasse
    super_kasse Aktives Mitglied
    Registriert seit:
    6. Juni 2019
    Beiträge:
    35
    Danke erhalten:
    0
    Danke vergeben:
    11
    Vielen Dank nochmal Barbara, hat super funktioniert :)