html - resueltos - maximos y minimos julioprofe

¿Cómo especifico en HTML o CSS el ancho mínimo absoluto de una celda de tabla?

Question

Resumen

¿Cuál es la mejor manera de garantizar que una celda de tabla no puede tener un ancho mínimo determinado?

Ejemplo

Quiero asegurarme de que todas las celdas de una tabla tengan al menos un ancho de 100 px respecto del ancho del contenedor de tablas. Si hay más espacio disponible, las celdas de la tabla deben llenar ese espacio.

Compatibilidad del navegador

Posiblemente me gustaría encontrar una solución que funcione en

• IE 6-8
• FF 2-3
• Safari

En orden de preferencia.

Answer 1

¿Qué hay de esta propiedad css

min-width: 100px

pero realmente no funciona en IE6 si no se confunde

si no quieres hacerlo de la manera css, supongo que puedes agregar este atributo

nowrap="nowrap"

en su etiqueta de datos de la tabla

Answer 2

Este CSS debería ser suficiente:

td { min-width: 100px; }

Sin embargo, no todos los navegadores siempre obedecen correctamente (el atributo min-width) (por ejemplo, IE6 no le gusta mucho).

Editar: en cuanto a una solución IE6 (y anterior), por lo que yo sé, no hay una que funcione confiablemente bajo ninguna circunstancia. El uso del atributo nowrap HTML realmente no logra el resultado deseado, ya que eso solo evita los saltos de línea en la celda, en lugar de especificar un ancho mínimo.

Sin embargo, si nowrap se usa junto con una propiedad de ancho de celda normal (como ancho de uso: 100px), 100px actuará como un ancho mínimo y la celda se expandirá con el texto (debido a nowrap). Esta es una solución menos que ideal, que no se puede aplicar completamente con CSS y, como tal, sería tedioso implementarla si tiene muchas tablas a las que desea aplicar esto. (Por supuesto, toda esta solución alternativa se cae si quiere tener saltos de línea dinámicos en sus celdas, de todos modos).

Answer 3

IE6 maneja el ancho como mínimo ancho:

td {
    min-width: 100px;
    _width: 100px;/* IE6 hack */
}

Si quieres que IE6 maneje el ancho como los navegadores normales, dale un desbordamiento: visible; (no es el caso aquí)

Answer 4

Otro truco es el antiguo truco de píxeles transparentes de 1x1. Inserta una imagen gif transparente 1x1 y establece su ancho en la etiqueta de la imagen al ancho que desees. Esto forzará que la celda sea al menos tan ancha como la imagen.

Answer 5

Tuve cierto éxito con:

    min-width: 193px;
    width:auto !important; 
    _width: 193px;  /* IE6 hack */

Basado en una combinación de la respuesta de Vatos y un artículo de altura mínima aquí: http://www.dustindiaz.com/min-height-fast-hack/

Answer 6

Esta es una forma de navegación cruzada para establecer el ancho mínimo y / o la altura mínima:

{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}

IE 6 no entiende! Importante
IE 6 ve ancho / alto: 200px (sobreescritura automática)

Otros navegadores entienden el mínimo y el importante

No estoy 100% familiarizado con el comportamiento de los anchos en los elementos TD, pero todo funciona bien en, por ejemplo, las etiquetas DIV.

Por cierto:

Basado en una combinación de la respuesta de Vatos y un artículo de altura mínima aquí: http://www.dustindiaz.com/min-height-fast-hack/

Esto no funciona debido al orden de las primeras 2 líneas, deben estar en el orden correcto (piense en lo anterior);)

Answer 7

Sé que esta es una vieja pregunta, pero pensé que compartiría algo que no se mencionó (aunque es bastante simple en concepto ...) puedes poner un <div> dentro de la tabla (en uno de los <td> ''s o algo así) y establecer el <div> en min-width . la tabla se detendrá en el ancho de <div> . Solo pensé en tirar eso en caso de que alguien se encuentre con esto en Google. Además, no estoy tan seguro de cómo se maneja el ancho mínimo en I.E6. pero eso ya ha sido cubierto en otra respuesta.