ugrás a tartalomhoz

Input elem szélessége legyen a szülő elem szélessége

tiku I tikaszvince · 2007. Aug. 27. (H), 11.58
Sziasztok!

Egy lekérdezés adatait szeretném megjeleníteni táblázatban, úgy hogy a fejléc sor alatt, de az első sor felett egy kereső mezőkből álló sort jelenítenék meg. De a kereső input elemek formázásával van egy kis problémám.

Milyen CSS szabállyal tudok egy input element rávenni arra, hogy pontosan töltse ki az őt befoglaló td elemet, és ne nyomja szét, úgy, hogy az oszlopok száma változó, és csak a teljes táblázat szélessége ismert (550px).

A HTML

<table>
<thead>
<tr><th>id</th><th>név</th><th>email</th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="filter-id" class="filter filter-id"/></td>
<td><input type="text" name="filter-name" class="filter filter-name"/></td>
<td><input type="text" name="filter-email" class="filter filter-email"/></td>
</tr>
</tbody>

<tbody>
<tr><td>1</td><td>tiku</td><td>email##kukac##ema.il</td></tr>
<tr><td>2</td><td>vince</td><td>v##kukac##in.ce</td></tr>
</tbody>
</table>
a jelenlegi CSS

table {
    border-collapse: collapse;
    margin: 5px;
    width: 550px;
}
td, th {
    padding: 5px;
    border: solid #ccc;
    border-width: 2px 1px;
}
td {
    vertical-align: top;
}
th {
    vertical-align: middle;
    text-align: center;
    border: 1px solid #000 !important;
    background: #eef;
}
input.filter {
	width: auto;
}
Eddig a width: (auto|inherit); szabályokkal próbálkoztam, de gyakorlatilag semmit nem csináltak.

Bevallom ennek a problémának a megoldását nem nagyon próbáltam megkeresni, ugyanis nem tudom, hogy hol kezdjem.

Köszi

tikuVoltam
‹ Tartalom betöltése Böngésző ellenőrzése ›
 ■
1

width: 100%?

zila · 2007. Aug. 27. (H), 12.36
az auto helyett 100% ?
2

magában nem elég

tiku I tikaszvince · 2007. Aug. 27. (H), 12.57
Magában a width: 100%; nem elég. Kicsit viszont gondolkodtam és arra jutottam, hogy 
td {
	padding: 0;
	width: auto !important;
	border: 1px solid #ccc;
}
td input.filter {
	width: 100%;
	border: none;
	padding: 2px 0;
	height: 1em;
	margin: 0;
}
Így már csak valahogy jelölnöm kell, hogy az nem egy üres sor, hanem keresőmező...
Köszönöm a "lökést"