Ajuste del contenido de la celda tabla en función de la anchura disponible

tengo una tabla HTML cuyas células contienen, entre otras cosas, vanos, así:Ajuste del contenido de la celda tabla en función de la anchura disponible

... 
<td> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
    <span style="height: 20px; width: 20px; margin-left: 2px;"> 
</td> 
...

estoy buscando una manera de reducir el ancho de esos tramos, en lugar de alinearlos, cuando la celda de la tabla que contiene es demasiado estrecha para mostrarlos todos en una línea. Intenté jugar con establecer los tramos 'max-width en 20px y luego usar un porcentaje para el ancho, pero eso no funciona porque la celda de la tabla intenta ser tan grande como su contenido.

El ancho mínimo de la celda de la tabla sería el ancho necesario para mostrar el encabezado en 1 línea.

Para los tipos visuales, esto es lo que tengo actualmente cuando hay suficiente ancho:

enter image description here

Aquí es lo que tengo actualmente, cuando no hay suficiente ancho:

enter image description here

Y aquí está lo que me gustaría que se vea cuando no hay suficiente ancho para que cada tramo sea un 20px completo:

enter image description here

En caso de que no es obvio, los tramos son los cuadrados de colores en los TXEs, RDBs y RavenNets columnas.

Fuente

2010-02-17 Matt Ball

+1 por hacer la pregunta de forma clara, concisa y con las maquetas de lo que tiene y lo que necesita! :) –

+1 del mismo modo. Buena forma –

Gracias. Pensé que nadie querría ver mi código fuente HTML solo para FF, y sabes lo que dicen sobre el valor de una imagen en palabras ... –

No pude encontrar una forma satisfactoria de CSS puro para hacer lo que quería. Ya tenía implementado un archivo de configuración de la aplicación (como un archivo .ini, más o menos), así que acabo de agregar mi ancho deseado a esta configuración. No es una solución de propósito general, pero se ajusta perfectamente a mis requisitos.

Fuente

2010-02-22 16:08:37

¿Ha considerado establecer un ancho mínimo en el td? o una envoltura Div dentro del td, pero fuera de los tramos?

Fuente

2010-02-17 19:17:15

El ancho de 'td' es el problema aquí. El problema no es que el 'td' sea demasiado estrecho. Por el contrario, el 'td' es exactamente tan amplio como debe ser. El problema es exprimir los contenidos del 'td' para que no se envuelvan en la siguiente línea. –

Utilice <td nowrap> o <td style="white-space:nowrap;"> para evitar la envoltura. Por lo general, una celda de tabla se debe expandir para que se ajuste a su contenido, a menos que se le permita envolver, o si ha restringido su ancho de alguna otra manera.

Fuente

2010-02-17 19:24:32 Ray

Probé ambos (hacen lo mismo) pero eso no funciona, como era de esperar. He (actualmente) establecido un ancho explícito en el contenido de la celda y, sí, el ancho de la celda está restringido, por eso tengo que reducir su contenido en primer lugar. –

@bears - nombre espeluznante! - Bueno, pensé en probar lo obvio primero. El ancho de configuración solo funciona en elementos de nivel de bloque, no en tramos. ¿Cuál es el contenido de tus tramos? ¿Cómo se establece el color? Imágenes? ¿Colores BG? ? – Ray

Los tramos están vacíos. Hasta aproximadamente 30 minutos antes de publicar mi pregunta, los tramos eran divs que eran 'float: left' ed; se comportaron exactamente igual. También jugué usando 'display: inline-block' para este fin. El color se establece con un fondo '-moz-linear-gradient'. –

Parece que esto hace algo parecido a lo que quiere en Firefox 3.6. El requisito crucial parece ser que el ancho de la tabla no puede ser en píxeles.

<!DOCTYPE HTML> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 

<style type="text/css"> 
    .indicator { 
     display:block; 
     white-space:nowrap; 
     min-width:8px; 
     max-width:300px; 
     width:100%; 
    } 

    .indicator li { 
     border:outset 2px; 
     display:inline-block; 
     height:80px; 
     min-width:2px; 
     max-width:80px; 
     padding:0 0 0 2px; 
     width:25%; 
    } 

    .ok { background:#0f0 } .caution { background:#ff0 } 
    .alert { background:#f00 } .inactive { background:#0ff } 

    table { width:100% } 
    td { width:100% } 

</style> 

</head> 

<body> 

<table><tr><td> 
<ul class="indicator"> 
    <li class="ok"></li> <li class="caution"></li> 
    <li class="alert"></li> <li class="inactive"></li> 
</ul> 
</td></tr></table> 

</body> 
</html>

Fuente

2010-02-17 20:00:47

Ajuste del contenido de la celda tabla en función de la anchura disponible

Respuesta

Cuestiones relacionadas