Ajuste de ancho de celda de tabla

Tomemos 4 columnas de tabla: ID , Text , Date , Action . En mi caso, la tabla siempre tiene un ancho constante, en el ejemplo 960px.

¿Cómo puedo crear una tabla como:

 *-*------------------------------------*----------*----* |1| Some text... |May 2011 |Edit| *-*------------------------------------*----------*----* |2| Another text... |April 2011|Edit| *-*------------------------------------*----------*----* 

Como podemos ver, ID , Date y Action ajustan su ancho al contenido, el Text es lo más largo posible …

¿Es posible hacerlo sin configurar el ancho específico de las columnas? Cuando ID = 123 o Date = noviembre de 2011, las columnas deberían ser automáticamente más anchas …

Usando un ancho del 100% en el ancho td y un ancho fijo para la tabla junto con white-space:nowrap , esto se puede hacer:

Manifestación

HTML

 
1 Some text... May 2011 Edit
2 Another text... April 2011 Edit

CSS

 table { ... width:960px; } td { ... white-space:nowrap; } 

Básicamente, es así: http://jsfiddle.net/49W5A/ – tienes que configurar el ancho de celda en algo pequeño (como 1px ) para que permanezcan lo más pequeño posible.

pero como verá, hay un problema con los campos de fecha haciendo un ajuste de línea. Para evitar esto, simplemente agregue white-space: nowrap; para su campo de texto: http://jsfiddle.net/ZXu7U/

ejemplo de trabajo:

  
1 Some Text... May 2011 Edit
2 Another Text... April 2011 Edit

Mi mejor consejo para usted es que no toque los anchos de la tabla, ya que la tabla se distribuye automáticamente de la manera que mejor se adapta a todas las celdas.

Sin embargo, si quieres pasar, usar width: 1px; en las celdas que necesitan ajuste (una de cada columna es suficiente). También use white-space: nowrap en todas las celdas. Eso asegurará que las líneas no se rompan.

Prueba esto:

.id, .date, .action son las celdas de la tabla (td).

CSS:

 .id, .date, .action { width: 1em; } 

Funciono para mi

El ancho: 1em no cortará el texto pero forzará el tamaño del ancho al mínimo.

La mejor manera que he encontrado para establecer los anchos de columna de la tabla es utilizar un encabezado de tabla (que puede estar vacío) y aplicar anchos relativos para cada celda de cabecera de tabla. Los anchos de todas las celdas en el cuerpo de la tabla se ajustarán al ancho de la cabeza de su columna. Ejemplo:

HTML

 
1 Some text... May 2018 Edit
2 Another text... April 2018 Edit

CSS

 table { width: 600px; border-collapse: collapse; } td { border: 1px solid #999999; } 

Ver resultado

Alternativamente, puedes usar el colgroup como se sugiere aquí .