Hola.
Estoy intentando hacer que una serie de tablas se vayan apilando en filas dentro de una capa (de ancho fijo).
<div style="width: 500px; height: 120px; border: 1px solid Silver; margin-left: 5px; overflow: scroll;">
<table cellpadding="0" cellspacing="0" style="margin: 4px;">
<tr>
<td rowspan="3"><img src="whatever.jpg" alt="sad" width="64px" height="64px" /></td>
<td>Prop1</td>
</tr>
<tr><td>Prop2</td></tr>
<tr><td>Prop3</td></tr>
</table>
<table cellpadding="0" cellspacing="0" style="margin: 4px;">
<tr>
<td rowspan="3"><img src="whatever.jpg" alt="sad" width="64px" height="64px" /></td>
<td>Prop1</td>
</tr>
<tr><td>Prop2</td></tr>
<tr><td>Prop3</td></tr>
</table>
</div>
Ahora mismo el comportamiento que tienen las tablas es que se apilan verticalmente, pero yo quiero que se vayan rellenado las columnas y que automáticamente vayan pasando a la siguiente fila cuando se alcance el ancho de la capa contenedora.
Si apilo imágenes sí funciona, pero con tablas o capas no. ¿Se os ocurre una forma de hacerlo automáticamente sin tener que echar mano de Javascript?.
Gracias.
Lo mas "normal" en estos casos sería hacer una tabla que trabajase como LayoutManager, y ajustar manualmente cuantas tablas quieres en cada fila introduciendo cada tabla en una celda. Esto con php/asp/cgi se haría bastante facil, pero con javascript no se muy bien como hacerlo :D
SUERTE
EDITADO: Te recomiendo tb que utilices css, eso de poner el style en cada tag se esta quedando un poco anticuado.
Cita de: "shephiroth"Lo mas "normal" en estos casos sería hacer una tabla que trabajase como LayoutManager, y ajustar manualmente cuantas tablas quieres en cada fila introduciendo cada tabla en una celda. Esto con php/asp/cgi se haría bastante facil, pero con javascript no se muy bien como hacerlo :D
Sí, puede que haga eso. En realidad lo puedo hacer en ASP.NET que es lo que utilizo.
Cita de: "shephiroth"EDITADO: Te recomiendo tb que utilices css, eso de poner el style en cada tag se esta quedando un poco anticuado.
Sí, utilizo CSS, esto era simplemente una prueba. :D
Gracias.
Mira, lo que tienes que hacer es crear las tablas con ancho fijo y añadirles el atributo float left a cada una de ellas. De esta forma se apilaran una al lado de otra. A la capa contenedora tambien deberías añadirle el float: left; salvo que por ello perjudiques el resto del diseño.
Saludos
Con este código:
<div style="width: 500px; height: 120px; border: 1px solid Silver; margin-left: 5px; overflow: scroll;">
<table cellpadding="0" cellspacing="0" style="margin: 4px; float: left;">
<tr>
<td rowspan="3"><img src="whatever.jpg" alt="sad" width="64px" height="64px" /></td>
<td>Prop1</td>
</tr>
<tr><td>Prop2</td></tr>
<tr><td>Prop3</td></tr>
</table>
<table cellpadding="0" cellspacing="0" style="margin: 4px; float: left;">
<tr>
<td rowspan="3"><img src="whatever.jpg" alt="sad" width="64px" height="64px" /></td>
<td>Prop1</td>
</tr>
<tr><td>Prop2</td></tr>
<tr><td>Prop3</td></tr>
</table>
</div>
Se ve bien.
Saludos
Muchas gracias StraT. Esa solución es sin duda la más sencilla.
Saludos.