Textboxen in der HTML-Tabelle: Wie kann man automatisch Größe haben?

StackOverflow https://stackoverflow.com/questions/2190550

  •  25-09-2019
  •  | 
  •  

Frage

Ich möchte eine Zeile unten in meiner HTML -Tabelle (oder oben, was auch immer) mit einem Textfeld in jeder Spalte hinzufügen (um die Filterung des Inhalts jeder Spalte zu ermöglichen).

FWIW, die Tabelle basiert auf dem Jquery Datatables-Plug-In.

Das Problem ist, dass die Textboxen die Spalten erweitern. Ich möchte, dass jedes Textfeld die Breite ihrer Spalte füllt, ohne sie zu vergrößern. Wie kann ich das machen?

War es hilfreich?

Lösung

Versuchen <input type="text" style="width:100%"/> Um die Breite des Elternteils TD zu bekommen.

Andere Tipps

Ich denke, [Breite zu 100%] könnte ein Problem mit diesem Ansatz sein, da die Grenzen und die Polsterung des Textfelds einige mit der Breite hinzugefügt werden.

In der Tat.

Sie können dies durch Hinzufügen kompensieren padding-right an die Zelle, die den Eingang (oder nur für alle Zellen) ähnlicher Größe wie die Grenzen und Padding des Eingangs enthält. Die Eingabe erweitert sich dann aus dem Zellinhaltungsbereich, aber nur auf die Polsterung, sodass er kein Chaos darstellt.

Das ist in Ordnung für nur normale Texteingaben. Wenn Sie auch andere Elemente haben, wie z. ).

Für die meisten Browser ist der CSS3 der einfachste und beständigste Weg, dies zu beheben Boxgrößen Eigentum:

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

IE6-7 unterstützt dies noch nicht, sodass Sie immer noch Felder erhalten, die sich in diesen Browsern nicht ganz aufstellen. Wenn Sie sich interessieren, können Sie eine Polsterprobleme speziell für diese hinzufügen.

Ich habe JQuery -Tabellen nicht verwendet, aber ich gehe davon aus, dass wenn Sie 'Breite: 80%' festlegen; und definieren Sie eine Breite für das 'TD', die Textbox sollte ihre Dimensionen von ihrem übergeordneten (der 'TD') erben.

Wenn das nicht funktioniert oder Sie einen anderen Ansatz wünschen, können Sie es versuchen:

td > input[type="text"] {width: 5em;} /* or whatever */

  table td {white-space: nowrap;}
  table th {white-space: nowrap;}

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

verwenden !important andere CSS -Regeln zu überschreiben

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top