Ankündigung

Einklappen
Keine Ankündigung bisher.

Width von Label innerhalb einer Tabelle greift nicht

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Width von Label innerhalb einer Tabelle greift nicht

    Hallo zusammen,

    habe folgende Tabelle, in der ich die jeweils die Labels "Name", "Strasse", "Plz" und "Kürzel" auf genau 8 em haben möchte (nicht mehr und nicht weniger) :

    HTML-Code:
    <div>
        <form>
        <table>
           <tr>
               <td><label for="name">Name</label></td> 
               <td colspan="3"><input type="text" name="name" id="name"></td>
           </tr>
           <tr>
               <td><label for="street">Strasse</label></td>
               <td colspan="3"><input type="text" name="street" id="street"></td>
               </tr>
           <tr>
                <td><label for="postalCode">Plz</label></td>
                <td><input type="text" name="postalCode" id="postalCode"></td>
                <td><label for="city">Ort</label></td>
                <td><input type="text" name="city" id="city"></td>
           </tr>
           <tr>
               <td><label for ="countryCode">Kürzel</label></td>
               <td><input type="text" name="countryCode" id="countryCode"></td>
               <td><label for ="country">Land</label></td>
               <td><input type = "text" name="country" id="country"></td>
            </tr>
    </table>
    </form>
    </div>

    Dazu habe ich folgenden CSS Code, die min-width arbeitet korrekt, jedoch nicht die max-width und finde nicht den Fehler :


    Code:
    * {
    box-sizing: border-box;
    }
    
    div {
      width: 90vw;
      background-color: lightgrey;
    }
    
    table {
      width: 100%;
    }
    
    input {
      width: 100%;
    }
    
    td:nth-child(3) {
    text-align: right;
    
    }
    
    tr td label:first-child {
      display: inline-block;
      min-width: 8em;
      max-width: 8em;
    }


  • #2
    min-width und max-width mit dem selben Wert ergibt keinen Sinn. Warum nicht direkt width verwenden?

    Außerdem sollte eine Tabelle nicht für Layout-Zwecke missbraucht werden. Eine Tabelle sollte für tabellarische Daten verwendet werden und sonst nichts. Also solltest du die Tabelle hier entfernen. Dann löst sich wahrscheinlich auch dein Problem von alleine.

    Kommentar


    • #3
      Moin,
      um ehrlich zu sein, hab ich mit dieser Antwort schon gerechnet
      Ich weiss, dass Tabellen nicht für Styling zweckentfremdet werden sollen.
      In meinem restlichen Code arbeite ich ja auch mit Flexbox, doch möchte ich in diesem Fall eine Ausnahme machen, da ich über eine Schleife viele verschiedene Lieferadressen in einer Tabelle darstellen möchte,
      die ich dann sofort bearbeiten kann (editieren, löschen, neu anlegen), so wie hier : https://datatables.net/examples/api/form.html

      Und nein, width allein hatte ich auch schon probiert.

      Kommentar


      • #4
        ...

        Kommentar


        • #5
          Zitat von Midget Beitrag anzeigen
          In meinem restlichen Code arbeite ich ja auch mit Flexbox, doch möchte ich in diesem Fall eine Ausnahme machen, da ich über eine Schleife viele verschiedene Lieferadressen in einer Tabelle darstellen möchte,
          die ich dann sofort bearbeiten kann (editieren, löschen, neu anlegen), so wie hier : https://datatables.net/examples/api/form.html
          So wie du es aktuell hast (ein Datensatz auf mehrere Zeilen verteilt) sind das keine tabellarischen Daten womit eine Tabelle falsch ist.

          Und nein, width allein hatte ich auch schon probiert.
          Ich verstehe das Problem nicht: label ist durchaus 8em breit, nur die Zellen halt nicht …

          Kommentar


          • #6
            Zitat von Midget Beitrag anzeigen
            Moin,
            um ehrlich zu sein, hab ich mit dieser Antwort schon gerechnet
            Ich weiss, dass Tabellen nicht für Styling zweckentfremdet werden sollen.
            In meinem restlichen Code arbeite ich ja auch mit Flexbox, doch möchte ich in diesem Fall eine Ausnahme machen, da ich über eine Schleife viele verschiedene Lieferadressen in einer Tabelle darstellen möchte,
            die ich dann sofort bearbeiten kann (editieren, löschen, neu anlegen), so wie hier : https://datatables.net/examples/api/form.html

            Und nein, width allein hatte ich auch schon probiert.
            Ich habe dir die Lösung zu deinem Problem genannt. Wenn du nicht willst, dann eben nicht. Somit ist wohl das Thema hier beendet.

            Kommentar


            • #7

              Ich verstehe das Problem nicht: label ist durchaus 8em breit, nur die Zellen halt nicht …
              Eben nicht, sobald ich die Fenstergrösse verändere, dann zieht sich mein Label über die gewünschten 8em.
              So wie du es aktuell hast (ein Datensatz auf mehrere Zeilen verteilt) sind das keine tabellarischen Daten womit eine Tabelle falsch ist.
              Ich dachte, weil ich ein table mit tr und td hab wärs ne valide Tabelle.

              Ich werd mir am Wochenende mal ind Ruhe den Quelltext der Tabledata anschauen und mal verushcne zu verstehen wie die das geregelt haben.

              LG

              Kommentar


              • #8
                Zitat von Midget Beitrag anzeigen
                Eben nicht, sobald ich die Fenstergrösse verändere, dann zieht sich mein Label über die gewünschten 8em.
                Setz für label mal testweise einen Rahmen, du wirst sehen dass der Rahmen immer die gleiche Breite hat, unabhängig von der Fenstergröße - nur die Zelle drumrum verändert die Breite.

                Ich dachte, weil ich ein table mit tr und td hab wärs ne valide Tabelle.
                Valide ist die Tabelle - nur die Semantik ist halt beim Teufel wenn man eine Tabelle für das Layout missbraucht …

                Ich werd mir am Wochenende mal ind Ruhe den Quelltext der Tabledata anschauen und mal verushcne zu verstehen wie die das geregelt haben.
                Die verwenden schon eine Tabelle[1], dabei ist aber jeder Datensatz in einer Zeile, du verteilst die Daten auf mehrere Zeilen - mit Tabledata wirst du da vmtl. sowieso nicht weit kommen.

                [1] das Script scheint schon etwas älter zu sein, da bekommt jede Zeile eine Klasse odd/even - das ist seit über 10 Jahren nicht mehr notwendig, selbst das kompilierte Sicherheitsrisiko (aka IE) kannte ab Version 9 :nth-child() …

                Kommentar


                • #9
                  Setz für label mal testweise einen Rahmen, du wirst sehen dass der Rahmen immer die gleiche Breite hat, unabhängig von der Fenstergröße - nur die Zelle drumrum verändert die Breite.
                  tk1234 du hattest 100% Recht. War echt die td Zelle drum die sich verbreiterte. Habs jetzt so gelöst und jetzt passts :

                  td:first-child {
                  width: 8em;
                  }

                  Kommentar


                  • #10
                    warum benutzt du nicht direkt Datatables? Das Ding lässt sich doch wunderbar customizen, wozu was neues erfinden?
                    Über 90% aller Gewaltverbrechen passieren innerhalb von 24 Stunden nach dem Konsum von Brot.

                    Kommentar

                    Lädt...
                    X