Apilando tablas en filas

[BeRSeRKeR]

Hola.

Estoy intentando hacer que una serie de tablas se vayan apilando en filas dentro de una capa (de ancho fijo).

Código [Seleccionar] Expand

<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.

[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

SUERTE

EDITADO: Te recomiendo tb que utilices css, eso de poner el style en cada tag se esta quedando un poco anticuado.

[BeRSeRKeR]

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.

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.

[StraT]

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

[StraT]

Con este código:

Código [Seleccionar] Expand

<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

[BeRSeRKeR]

Muchas gracias StraT. Esa solución es sin duda la más sencilla.

Saludos.