html - tablas - Configuración del ancho del contenido de las celdas de la tabla según el ancho disponible
tablas html (4)
Tengo una tabla HTML cuyas celdas contienen, entre otras cosas, tramos, como este:
...
<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 forma de reducir el ancho de esos tramos, en lugar de envolverlos en línea, cuando la celda de la tabla que contiene es demasiado estrecha para mostrarlos todos en una línea. Intenté jugar un poco con la configuración del max-width 20px a 20px y luego usar un porcentaje para el ancho, pero eso no funciona porque la celda de la tabla intenta ser tan amplia como su contenido.
El ancho mínimo de 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:
Esto es lo que tengo actualmente cuando no hay suficiente ancho:
Y esto es lo que me gustaría que pareciera cuando no hay suficiente ancho para que cada tramo tenga un total de 20px:
En caso de que no sea obvio, los tramos son los cuadrados de colores en las TXEs , RDBs y RavenNets .
¿Has considerado establecer un ancho mínimo en el td? o una envoltura div dentro del td, pero fuera de los tramos?
Este tipo de algo parece hacer algo parecido a lo que quieres en Firefox 3.6. El requisito crucial parece ser que el ancho de la tabla no puede estar 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>
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 simplemente agregué el ancho deseado a esta configuración. No es una solución de propósito general, pero se ajusta a mis requisitos muy bien.
Use <td nowrap> o <td style="white-space:nowrap;"> para evitar el ajuste. Por lo general, una celda de la tabla debería expandirse para ajustarse a su contenido, a menos que se le permita ajustarse, o usted haya restringido su ancho de alguna otra manera.