¿Puedo tener un elemento de entrada para llenar el ancho de una columna de tabla?

Question

Me gustaría que un elemento de entrada [type = text] tenga siempre el mismo ancho que la celda de la tabla en la que está contenido. Necesito asegurarme de que el ancho de la celda de la tabla no se ve influenciado por el ancho del elemento de entrada.

¿Cómo puedo hacer esto con CSS? ¿Tendré que usar JS? Si es así, ¿cuál sería la mejor manera de determinar cuándo la celda de la tabla cambió de tamaño?

Answer 1

¿Qué pasa con el ajuste de ancho de estilo (o clase): 100%; para elementos de entrada que están dentro de una tabla?

Algo como esto:

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

Answer 2

CSS debe hacer el truco:

#my_input { 
    width: 100%; 
} 

#my_table { 
    table-layout:fixed; 
} 

Answer 3

si esto funciona para usted:

td > input[type='text'] 
{ 
    width: 100%; /*this will set the width of the textbox equal to its container td*/ 
} 

intente esto:

td > input[type='text'] 
{ 
    display:block; /*this will make the text box fill the horizontal space of the its container td*/ 
} 

Answer 4

El ancho de ajuste de su campo al 100% debería funcionar. En este caso, también querrá agregar la regla box-sizing para evitar que el campo de entrada ignore los rellenos de celda de la tabla.

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

Ver ejemplo http://jsfiddle.net/MEARG/

Answer 5

reglas CSS Ajuste width:100%;display:block; y para el elemento INPUT debe hacer eso.

En la práctica, eso no es suficiente, parece que algunos navegadores enfatizan el INPUT de size por el estilo. Por ejemplo, Chrome amplía el elemento para que coincida con el tamaño, lo que amplía la columna de la tabla. La configuración size=0 no funciona, ya que de manera predeterminada tiene un valor válido. Sin embargo, establecer el atributo size=1 en el elemento INPUT logra el comportamiento deseado. Sin embargo, esta no es una solución exclusiva de CSS, y el INPUT no se puede comprimir por debajo de un ancho determinado pero pequeño.