Textfelder in der HTML-Tabelle: Wie wird die Größe automatisch festgelegt?

8

Ich möchte eine Zeile am Ende meiner HTML-Tabelle (oder ganz oben, egal) mit einem Textfeld in jeder Spalte hinzufügen (um den Inhalt jeder Spalte filtern zu können).

FWIW, die Tabelle basiert auf dem jQuery DataTables-Plug-in.

Das Problem besteht darin, dass die Textfelder die Spalten erweitern. Ich möchte, dass jedes Textfeld die Breite seiner Spalte füllt, ohne es zu vergrößern. Wie kann ich das tun?

    
Serge Wautier 03.02.2010, 08:21
quelle

3 Antworten

19

probiere <input type="text" style="width:100%"/> aus, um die Breite von parent td zu erhalten.

    
ntan 03.02.2010, 08:24
quelle
10
  

Ich denke, [Breite 100%] könnte bei diesem Ansatz ein Problem sein, da die Ränder und das Auffüllen des Textfelds etwas mit aufnehmen, das zu der Breite hinzugefügt wird.

Tatsächlich.

Sie können dies kompensieren, indem Sie padding-right zu der Zelle hinzufügen, die die Eingabe (oder nur zu allen Zellen) enthält, die eine ähnliche Größe wie die Ränder und die Auffüllung der Eingabe haben. Die Eingabe wird dann außerhalb des Inhaltsbereichs der Zelle angezeigt, jedoch nur auf dem Padding, so dass keine Unordnung entsteht.

Das ist in Ordnung für normale Texteingaben. Wenn Sie auch andere Elemente wie z. B. Auswahlfelder oder Schaltflächen haben, die Sie auf diese Weise skalieren möchten, kann die Padding-Methode fehlschlagen, da bei IE die 'Breite' einer Auswahl den Rahmen und das Padding enthält (aufgrund eines Betriebssystem-Widgets) ).

Bei den meisten Browsern ist die CSS3 Box-Sizing Eigenschaft:

%Vor%

IE6-7 unterstützt dies noch nicht, so dass Sie immer noch Felder erhalten können, die in diesen Browsern nicht richtig ausgerichtet sind. Wenn Sie möchten, können Sie speziell für diese eine Problemumgehung hinzufügen.

    
bobince 03.02.2010 09:55
quelle
2

Ich habe keine jQuery-Tabellen verwendet, aber ich nehme an, dass Sie "width: 80%" festlegen. und definieren Sie eine Breite für das 'td', das Textfeld sollte seine Dimensionen von seinem Eltern (dem 'td') erben.

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

%Vor%     
David Thomas 03.02.2010 08:30
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset ___ answer1910443 ___

Ich habe "Zeilennummern anzeigen" im Kontextmenü, wenn ich mit der rechten Maustaste auf die linke Seite des Editorfensters klicke.

    
___ tag123eclipse ___ Eclipse ist eine Open-Source-IDE und Plattform zum Erstellen von Anwendungen. Es gibt eine Vielzahl von Plugins für verschiedene Programmiersprachen und andere entwicklungsorientierte Werkzeuge (wie Modellierung, Datenbanksuche usw.). Dieses Tag sollte nur für Fragen verwendet werden, die sich speziell mit der Eclipse-IDE oder der Eclipse-Plattform befassen, nicht jedoch für generalisierte (Java, Android usw.) Programmierthemen. ___ answer1910436 ___
  

Fenster - & gt; Einstellungen - & gt; Allgemein - & gt; Redakteure - & gt; Text-Editoren - & gt; Zeilennummern anzeigen

    
___ tag123linenumbers ___ Die Zeilennummer (Position) einer Zeile mit Text oder Code in einer Datei, oft zum Debuggen. ___ qstntxt ___

BEARBEITEN: jldupont s Vorschlag ( siehe unten ) hat den Trick

gemacht
  

Fenster - & gt; Einstellungen - & gt; Allgemein - & gt; Redakteure - & gt; Text-Editoren - & gt; Zeilennummern anzeigen

Ich habe gerade Eclipse Galileo installiert (zum ersten Mal) und programmiere in C ++ und konnte den Editor nicht dazu bringen, die Zeilennummern anzuzeigen ... Als ich gegoogelt habe, habe ich folgende Anweisungen:

  

Gehe zu Fenster - & gt; Einstellungen - & gt; Herausgeber - & gt; Aussehen und aktivieren Sie Zeilennummern anzeigen

Aber wenn ich diesen Anweisungen folge - gibt es kein Kontrollkästchen "Zeilennummern anzeigen" ? Wo kann ich dieses "Plug-in" zur Aktivierung dieser Funktion bekommen? oder hat Eclipse Zeilennummern?

Hinweis: Ich habe CDT installiert

    
___ tag123c ___ C ++ ist eine universelle Programmiersprache. Es wurde ursprünglich als Erweiterung von C entworfen und behält eine ähnliche Syntax, ist aber jetzt eine komplett andere Sprache. Verwenden Sie dieses Tag für Fragen zu Code, der mit einem C ++ - Compiler kompiliert werden soll. ___