Textfelder in der HTML-Tabelle: Wie auto-size?

Möchte ich noch hinzufügen einer Zeile am Ende meiner HTML-Tabelle (oder an der Spitze, was auch immer) mit einem Textfeld, in jeder Spalte (damit abfiltrieren der Inhalt der einzelnen Spalten).

FWIW, die Tabelle basiert auf der jQuery-DataTables-plug-in.

Das problem ist, dass die Textfelder erweitern sich die Spalten. Ich möchte jede textbox zu füllen, die der Breite Ihrer Spalte, ohne Sie zu vergrößern. Wie kann ich dies tun?

InformationsquelleAutor Serge Wautier | 2010-02-03
  1. 19

    versuchen <input type="text" style="width:100%"/> um die Breite des übergeordneten td.

    • Ich bin mir nicht ganz sicher, aber ich denke, es könnte ein problem mit diesem Ansatz, da die Grenzen und Polsterung des Textfeldes nehmen etwas mit, das Hinzugefügt wird, um die Breite. Das heißt, wenn der td ist 100px breit und das Textfeld hat, sagen, 1px border und 4px padding, das Textfeld wird konkret brauchen eine Gesamt Breite von 100 + 2 * (1 + 4) = 110px bei der Einstellung Breite="100%". Ich denke.
    • Ha! So einfach ist das! Funktioniert im IE8, aber nicht in Chrom: die Breite Prozentsatz entspricht dem col Breite, aber comlumns ausgeweitet werden obwohl.
    • Sie können versuchen, width: "auto" oder Breite:Erben
    • auto/inherit Breite wird es nicht tun, müssten Sie 100%. Wenn Sie feststellen, dass die zusätzliche Größe ist, die Spaltenbreiten, das heißt, Sie muss die Standard - auto - Tisch-layout. Sie don ' T wollen in der Regel auto-table-layout als es langsam zu Rendern und unberechenbar. Am besten ist, um table-layout: fixed und geben Sie die Spalten behoben werden soll eine explizite Breite (auf der ersten Zeile von Zellen, oder, besser, mit <col>). Spalten ohne explizite Breite teilen sich den Rest Breite unter Ihnen.
    • Es haben alle gut funktioniert, wenn ich entfernen Sie einige der die Spalte-Breite-Spezifikationen. Ich denke, ich werde nie wissen, warum!
    InformationsquelleAutor ntan
  2. 10

    Denke ich [width 100%] es könnte ein problem mit diesem Ansatz, da die Grenzen und Polsterung des Textfeldes nehmen etwas mit, das Hinzugefügt wird, um die Breite.

    In der Tat.

    Können Sie kompensieren dies, indem Sie padding-right auf die Zelle mit der Eingabe (oder einfach nur alle Zellen), von ähnlicher Größe zu den Grenzen-und-padding der Eingabe. Den Eingang, dann dehnt sich der Inhalt der Zelle Gebiet, aber nur auf die Polsterung, damit es nicht ein Durcheinander machen.

    Ist das OK, nur für normalen text ein. Wenn Sie haben auch andere Elemente wie Auswahlfelder oder Schaltflächen, die Sie möchten, um die Größe dieser Art, die Polsterung Methode kann nach hinten losgehen, weil im IE die 'Breite' eines auswählen, inklusive der border und padding (durch ein OS-widget).

    Bei den meisten Browsern ist der einfachste und effizienteste Weg, dies zu beheben, ist die CSS3 - box-sizing Eigenschaft:

    td.input input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    IE6-7 nicht unterstützt dies noch, so dass Sie immer noch Felder, die nicht ganz line-up in diesen Browsern. Wenn Sie sich sorgen, können Sie eine Polsterung Abhilfe, die speziell für diese.

    • danke für die info über box-sizing
    InformationsquelleAutor bobince
  3. 2

    Habe ich nicht verwendet jQuery Tabellen, aber ich gehe davon aus, dass wenn Sie 'width: 80%;' und definieren Sie die Breite der 'td',' der text-box Erben sollte seine Maße von seinen Eltern (die 'td').

    Wenn das nicht funktioniert, oder Sie wollen einen anderen Ansatz, die Sie könnten versuchen:

    td > input[type="text"] {width: 5em;} /* or whatever */
    InformationsquelleAutor David Thomas
  4. 0
      table td {white-space: nowrap;}
  table th {white-space: nowrap;}

  td input[type="text"] {width: 100%;}

    verwenden !important überschreiben, die anderen css-Regeln

    InformationsquelleAutor rashidnk
Schreibe einen Kommentar