Tabellen nebeneinander abbilden Custom Liquid

Deutsch Diskussion Shopify Design
1

Hallo zusammen,

hat jemand eine Idee, wie ich es schaffe, dass zwei gleiche Tabellen nebeneinander abgebildet werden?

Also folgende Anforderung:

  1. Zwei Tabellen nebeneinander

  2. Dynamische Aufteilung der Spalten, wenn 2 Werte hinterlegt sind, links = 1 / rechts = 1 bzw. links = 2 / rechts = 1 usw.

  3. Anpassung der Spaltenbreite am Text (das passt aber soweit schon)

  4. geht das auch Mobil oder wird das zu klein?

Vielen Dank für eure Unterstützung:)

den Input für den Code habe ich übrigens von Youtube Martin Gasiorek.

So sollte es aussehen:

3.png
3.png1661×863 42.4 KB

Mein erstellter Code dafür (wird aber eben alles untereinander aufgegliedert)

<style>
    .spec-table {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .spec-erste-spalte {
        height: auto;
        width: 200px;
        background-color: #F2F2F2;
        font-weight: bold;
    }
</style>

<div class="container page-width spec-table">
    <h3>Weitere Produktinfos</h3>
    <table style="
    width: auto
    ">
        <tbody>

            <!-- Hersteller -->
            <tr>
                <td class="spec-erste-spalte">Hersteller</td>
                <td>{{ product.vendor }}</td>
            </tr>

            <!-- Autor -->

            {% if product.metafields.produktinformationen.autor %}
            <tr>
                <td class="spec-erste-spalte">Autor</td>
                <td>{{ product.metafields.produktinformationen.autor }}</td>
            </tr>
            {% endif %}

            <!-- Einband -->

            {% if product.metafields.produktinformationen.einband %}
            <tr>
                <td class="spec-erste-spalte">Einband</td>
                <td>{{ product.metafields.produktinformationen.einband }}</td>
            </tr>
            {% endif %}

            <!-- Erscheinungsdatum -->

            {% if product.metafields.produktinformationen.erscheinungsdatum %}
            <tr>
                <td class="spec-erste-spalte">Erscheinungsdatum</td>
                <td>{{ product.metafields.produktinformationen.erscheinungsdatum }}</td>
            </tr>
            {% endif %}

            <!-- Seitenzahl -->

            {% if product.metafields.produktinformationen.seitenzahl %}
            <tr>
                <td class="spec-erste-spalte">Seitenzahl</td>
                <td>{{ product.metafields.produktinformationen.seitenzahl
                    }}</td>
            </tr>
            {% endif %}

            <!-- Einheit -->

            {% if product.metafields.produktinformationen.einheit %}
            <tr>
                <td class="spec-erste-spalte">Einheit</td>
                <td>{{ product.metafields.produktinformationen.einheit
                    }}</td>
            </tr>
            {% endif %}

            <!-- Maße -->

            {% if product.metafields.produktinformationen.ma_e %}
            <tr>
                <td class="spec-erste-spalte">Maße</td>
                <td>{{ product.metafields.produktinformationen.ma_e }}</td>
            </tr>
            {% endif %}

            <!-- Länge -->

            {% if product.metafields.produktinformationen.laenge %}
            <tr>
                <td class="spec-erste-spalte">Länge</td>
                <td>{{ product.metafields.produktinformationen.laenge }}</td>
            </tr>
            {% endif %}

            <!-- Breite -->

            {% if product.metafields.produktinformationen.breite %}
            <tr>
                <td class="spec-erste-spalte">Breite</td>
                <td>{{ product.metafields.produktinformationen.breite }}</td>
            </tr>
            {% endif %}

            <!-- Höhe -->

            {% if product.metafields.produktinformationen.hoehe %}
            <tr>
                <td class="spec-erste-spalte">Höhe</td>
                <td>{{ product.metafields.produktinformationen.hoehe }}</td>
            </tr>
            {% endif %}

            <!-- Gewicht -->

            {% if product.metafields.produktinformationen.gewicht %}
            <tr>
                <td class="spec-erste-spalte">Gewicht</td>
                <td>{{ product.metafields.produktinformationen.gewicht }}</td>
            </tr>
            {% endif %}

            <!-- Sprache -->

            {% if product.metafields.produktinformationen.sprache %}
            <tr>
                <td class="spec-erste-spalte">Sprache</td>
                <td>{{ product.metafields.produktinformationen.sprache }}</td>
            </tr>
            {% endif %}

            <!-- Auflage -->

            {% if product.metafields.produktinformationen.auflage %}
            <tr>
                <td class="spec-erste-spalte">Auflage</td>
                <td>{{ product.metafields.produktinformationen.auflage }}</td>
            </tr>
            {% endif %}

            <!-- ISBN -->

            {% if product.metafields.produktinformationen.isbn %}
            <tr>
                <td class="spec-erste-spalte">ISBN</td>
                <td>{{ product.metafields.produktinformationen.isbn }}</td>
            </tr>
            {% endif %}

            <!-- EAN -->

            <tr>
                <td class="spec-erste-spalte">EAN</td>
                <td>{{ product.selected_or_first_available_variant.barcode }}</td>
            </tr>
        </tbody>
    </table>
</div>
2

Mit einem Grid und 2 Containern arbeiten. Alles in eine Schleife geben und abwechselnd in den Containern anzeigen lassen. Das wäre mein Lösungsansatz.

1 Like
3

Danke dir Nordalux,

ich befasse mich mal damit!

Liebe Grüße

Dennis