Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen

  • Habe auf der Seite eines Freundes eine Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen.

    Auf der Speisekarte sollen vor den eigentlichen Essen eine Nr. stehen. Kann ja nicht so schwer sein. Dachte ich.

    Aber die 1. Rubrik lässt sich den anderen nicht anpassen. ( Also jedenfalls nicht von mir )

    Vielleicht findet einer von euch den Fehler, der sich meiner Wahrnehmung beharrlich verweigert.


    und noch ein Bildchen

    lecker1.jpeg




    Die Abstände von Zuppe sind ok. Die Beschreibung könnte mehr Plat belegen.

    Unter " Insalata sind die Abstände insgesamt zu groß

  • 1.Tabelle

    Code
    <tr>
     <td class="sp1">Nr. 121</td>
     <td class="sp2">Minestrone</td>
     <td class="sp3">Suppe mit geschlagenem Ei</td>
     <td class="sp4">7,00€</td>
    </tr>

    2. Tabelle

    Code
    <tr>
      <td class="sp1">Nr.86</td>
      <td class="sp2">Tomate Uno</td>
      <td class="sp2">Tomaten und Zwiebel </td>
      <td class="sp4">8,00€</td>
     </tr>

    Fällt dir was auf?

  • 1.Tabelle

    Code
    <tr>
     <td class="sp1">Nr. 121</td>
     <td class="sp2">Minestrone</td>
     <td class="sp3">Suppe mit geschlagenem Ei</td>
     <td class="sp4">7,00€</td>
    </tr>

    2. Tabelle

    Code
    <tr>
      <td class="sp1">Nr.86</td>
      <td class="sp2">Tomate Uno</td>
      <td class="sp2">Tomaten und Zwiebel </td>
      <td class="sp4">8,00€</td>
     </tr>

    Fällt dir was auf?

    noch nicht aber ich gehe jetzt bit für bit durch :/

  • Bei so etwas offenbaren sich die Vorteile von Gridlayout: Kein zusätzlichen Container und Klassen, nur die Elemente aneinander gereiht und dann dieses CSS:

    Code
            div.modal-body div.grid-container {
                display: grid;
                grid-template-columns: 1fr 2fr 6fr 1fr;
            }

    Und das Umschalten auf vertikale Anordnung ist kinderleicht:

    Code
                div.modal-body div.grid-container {
                    grid-template-columns: 1fr;
                }

    Aber auch bei der jetzigen Lösung mit Tabellen könntest Du es vereinfachen und auf die Klassen verzichten, wenn Du nth-of-type verwendest:

    :nth-of-type | CSS-Tricks
    The :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level
    css-tricks.com

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!