Penso che [larghezza 100%] potrebbe essere un problema con questo approccio in quanto i bordi e padding della casella di testo ne occupano alcune con quella che viene aggiunta alla larghezza.
Infatti.
È possibile compensare questo aggiungendo padding-right alla cella contenente l'input (o solo a tutte le celle) di dimensioni simili ai bordi e al riempimento dell'input. L'input si espande fuori dall'area del contenuto della cella, ma solo sul padding, quindi non crea problemi.
Questo va bene solo per gli input di testo normali. Se hai anche altri elementi come caselle di selezione o pulsanti che desideri ridimensionare in questo modo, il metodo di riempimento può ritorcersi contro perché su IE la "larghezza" di una selezione è comprensiva del bordo e del riempimento (poiché è un widget del SO).
Per la maggior parte dei browser, il modo più semplice e coerente per risolvere questo problema è la proprietà CSS3 box-sizing:
td.input input {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
IE6-7 non supporta ancora questa, in modo da poter ancora ottenere i campi che non lo fanno abbastanza allineato in questi browser. Se ti interessa, puoi aggiungere una soluzione di riempimento specifica per quelli.
Non ne sono completamente sicuro, ma penso che ci potrebbe essere un problema con questo approccio dato che i bordi e il riempimento della casella di testo ne occupano alcuni con quello che viene aggiunto alla larghezza. Cioè, se il td è largo 100 px e la casella di testo ha, ad esempio, il bordo 1px e il padding 4px, la casella di testo ha bisogno acutalmente di una larghezza totale di 100 + 2 * (1 + 4) = 110px se impostata su width = " 100%". Credo. –
Ha! Così semplice! Funziona bene in IE8 ma non in Chrome: la percentuale di larghezza corrisponde alla larghezza del col, ma le colonne sono tuttavia allargate. –
Puoi provare width: auto o width: inherit – ntan