¿Cómo puedo especificar en HTML o CSS el mínimo ancho de una celda de tabla

Question

Resumen

¿Cuál es la mejor manera de asegurar una celda de la tabla no puede ser menor que un cierto ancho mínimo.

Ejemplo

Quiero para asegurarse de que todas las celdas en una tabla, al menos 100px de ancho respecto de la anchura de las tablas contenedor.Si hay más espacio disponible en las celdas de la tabla debe rellenar ese espacio.

Compatibilidad del navegador

Me es posible me gustaría encontrar una solución que funciona en

• Es decir 6-8
• FF 2-3
• Safari

En orden de preferencia.

Answer 1

Este CSS debería ser suficiente:

td { min-width: 100px; }

Sin embargo, no siempre obedeció correctamente (min-width atributo) por todos los navegadores (por ejemplo, IE6 le disgusta mucho).

Editar: Como para un IE6 (y antes) de la solución, no hay uno que funciona de forma fiable en todas las circunstancias, por lo que yo sé.El uso de la nowrap atributo HTML en realidad no lograr el resultado deseado, ya que sólo evita saltos de línea en la celda, en lugar de especificar un ancho mínimo.

Sin embargo, si nowrap se utiliza en conjunción con un regular el ancho de celda de la propiedad (tales como el uso de ancho de:100px), el 100px actuará como un ancho mínimo y la celda seguirá expandiéndose con el texto (debido a la nowrap).Este es un menos-que-ideal de la solución, que no puede ser aplicada completamente con CSS y, como tal, sería tedioso para aplicar si usted tiene muchas tablas que desea aplicar a este.(Por supuesto, toda esta alternativa de solución se cae si usted quiere tener la dinámica de saltos de línea en sus células, de todos modos).

Answer 2

Otro hack es la edad de 1x1 pixel transparente truco.Insertar un 1x1 imagen gif transparente y establecer su anchura en la etiqueta de imagen para el ancho que desee.Esto obligará a la célula para ser al menos tan ancha como la de la imagen.

Answer 3

Sé que esto es una vieja pregunta, pero he pensado que me gustaría compartir algo que no se ha mencionado (Aunque bastante simple en concepto..) que sólo puede poner una <div> dentro de la tabla (en uno de los <td>'s, o algo) y el conjunto de la <div> a min-width.la mesa hará una parada en el <div>'s de ancho.Sólo pensé en abandonarlo allí en caso de que alguien viene a través de esto en google.Además, yo no estoy tan seguro acerca de cómo min-width es manejado en I. E6.pero que ya ha sido cubierto en otra respuesta.

Answer 4

He tenido algo de éxito con:

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

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

Answer 5

¿qué acerca de esta propiedad de css

min-width: 100px

pero en realidad no funciona en IE6 si no me equivoco

si no quieres hacerlo en el css manera, supongo que usted puede añadir este atributo

nowrap="nowrap"

en la tabla de datos de la etiqueta

Answer 6

Este es un cross-browser para el ajuste de ancho mínimo y/o mimimum altura:

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

IE 6 no entiendo !importante
IE 6 ve width/height:200px (sobreescritura automática)

Otros navegadores entender el min y el !importante

No estoy 100% familiarizado con el comportamiento de ancho en elementos TD, pero todo esto funciona muy bien en por ejemplo las etiquetas DIV

BTW:

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

Esto no va a funcionar porque el orden de las 2 primeras líneas, que deben estar en el orden correcto (pensar en la de arriba) ;)

Answer 7

IE6 controla la anchura de min-width:

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

Si desea IE6 para controlar el ancho normal de los navegadores, le dan un overflow:visible;(no es el caso aquí)