Ich denke, [Breite 100%], da die Grenzen ein Problem mit diesem Ansatz sein könnte und Polsterung der Textbox nehmen einige mit, die zur Breite hinzugefügt werden.
In der Tat.
Sie können dies kompensieren, indem Sie zu der Zelle hinzufügen, die die Eingabe (oder nur zu allen Zellen) von ähnlicher Größe wie die Ränder und die Auffüllung der Eingabe enthält. Die Eingabe wird dann außerhalb des Zelleninhaltsbereichs ausgeführt, jedoch nur auf dem Padding, sodass keine Unordnung entsteht.
Das ist OK für nur 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 einfachste und konsequenteste 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 dies noch nicht unterstützt, so dass Sie immer noch Felder bekommen, die nicht tun in diesen Browsern ganz aufzustellen. Wenn Sie möchten, können Sie speziell für diese eine Problemumgehung hinzufügen.
Ich bin mir nicht ganz sicher, aber ich denke, es könnte ein Problem mit diesem Ansatz sein, da die Grenzen und das Auffüllen des Textfelds etwas mit aufnehmen, das zur Breite hinzugefügt wird. Das heißt, wenn das TD 100 Pixel breit ist und das Textfeld beispielsweise 1 Pixel Rand und 4 Pixel Polster hat, benötigt das Textfeld tatsächlich eine Gesamtbreite von 100 + 2 * (1 + 4) = 110 Pixel, wenn auf Breite = " 100%". Ich denke. –
Ha! So einfach ist das! Funktioniert gut in IE8, aber nicht in Chrome: Der Prozentsatz der Breite stimmt mit der Breite überein, aber die Spalten werden erweitert. –
Sie können versuchen, Breite: Auto oder Breite: erben – ntan