cuadros de texto en la tabla HTML: cómo auto-tamaño?

Quiero agregar una fila en la parte inferior de mi tabla HTML (o en la parte superior, lo que sea) con un cuadro de texto en cada columna (para permitir el filtrado del contenido de cada columna).cuadros de texto en la tabla HTML: cómo auto-tamaño?

FWIW, la tabla se basa en el complemento jQuery DataTables.

El problema es que los cuadros de texto ensanchan las columnas. Quiero que cada cuadro de texto llene el ancho de su columna sin agrandarlo. ¿Cómo puedo hacer esto?

Fuente

2010-02-03 Serge Wautier

prueba <input type="text" style="width:100%"/> para obtener el ancho de la td principal.

Fuente

2010-02-03 08:24:41 ntan

No estoy del todo seguro, pero creo que podría haber un problema con este enfoque, ya que los bordes y el relleno del cuadro de texto ocupan algunos de los que se agregan al ancho. Es decir, si el td tiene 100 px de ancho y el cuadro de texto tiene, por ejemplo, 1px border y 4px padding, el cuadro de texto necesitará un ancho total de 100 + 2 * (1 + 4) = 110px si se establece en width = " 100% ". Creo. –

¡Ja! ¡Tan sencillo como eso! Funciona bien en IE8 pero no en Chrome: el porcentaje de ancho coincide con el ancho de la columna, pero las comlumns se amplían. –

Puedes probar el ancho: automático o ancho: hereda – ntan

No he usado jQuery Tables, pero supongo que si configuras 'width: 80%;' y define un ancho para 'td', el cuadro de texto debe heredar sus dimensiones de su elemento principal (el 'td').

Si eso no funciona, o si desea un enfoque diferente, usted podría intentar:

td > input[type="text"] {width: 5em;} /* or whatever */

Fuente

2010-02-03 08:30:40

pienso [100% de ancho] podría ser un problema con este enfoque, ya que las fronteras y el relleno del recuadro de texto tomar algunos con eso se agrega al ancho.

Indeed.

Puede compensar esto agregando padding-right a la celda que contiene la entrada (o solo a todas las celdas) de tamaño similar al borde y relleno de la entrada. La entrada luego se expande fuera del área de contenido de la celda, pero solo en el relleno para que no ensucie.

Eso está bien para entradas de texto normales. Si también tiene otros elementos como cuadros de selección o botones que desea cambiar el tamaño de esta manera, el método de relleno puede ser contraproducente porque en IE el 'ancho' de una selección incluye el borde y el relleno (debido a ser un widget de sistema operativo)

Para la mayoría de los navegadores, la forma más fácil y más consistente para solucionar este problema es la propiedad CSS3 box-sizing:

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

IE6-7 no soporta esto todavía, por lo que aún puede obtener campos que no lo hacen bastante alineación en estos navegadores. Si te importa, puedes agregar una solución de relleno específicamente para esos.

Fuente

2010-02-03 09:55:20 bobince

gracias por la información sobre el tamaño de la caja –

cuadros de texto en la tabla HTML: cómo auto-tamaño?

Respuesta

Cuestiones relacionadas