Foros del Web » Creando para Internet » CSS »

posicionamiento de tablas :S

Estas en el tema de posicionamiento de tablas :S en el foro de CSS en Foros del Web. hola como lo puedo hacer para posicionar las tablas UNAS AL LADO DE LA OTRA y no abajo de la otra el codigo es: Cita: ...
  #1 (permalink)  
Antiguo 25/11/2008, 19:19
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
posicionamiento de tablas :S

hola como lo puedo hacer para posicionar las tablas UNAS AL LADO DE LA OTRA y no abajo de la otra




el codigo es:

Cita:
<div class="alex" style="position:relative">
<table width="30%" border="1" cellspacing="1">
<caption>Flujo de Ingreso/Salida</caption>
<tr >
<th width="39%" scope="col"><div align="left">Tipo Registro</div></th>
<th width="20%" scope="col"><div align="left">%</div></th>
<th width="40%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingreso</div></th>
<td><? echo porcentaje($total[0],$ingresos[0]) ?></td>
<td><? echo $ingresos[0] ?></td>
</tr>
<tr>
<th scope="row"><div align="left">Salida</div></th>
<td><? echo porcentaje($total[0],$salidas[0]) ?></td>
<td><? echo $salidas[0] ?></td>
</tr>
<tr >
<th scope="row"><div align="left">Total</div></th>
<td><? echo porcentaje($total[0],$total[0]) ?></td>
<td><? echo $total[0] ?></td>
</tr>
</table>


<table width="30%" border="1" cellspacing="1">
<caption>Flujo de Ingreso/Salida</caption>
<tr >
<th width="39%" scope="col"><div align="left">Tipo Registro</div></th>
<th width="20%" scope="col"><div align="left">%</div></th>
<th width="40%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingreso</div></th>
<td><? echo porcentaje($total[0],$ingresos[0]) ?></td>
<td><? echo $ingresos[0] ?></td>
</tr>
<tr>
<th scope="row"><div align="left">Salida</div></th>
<td><? echo porcentaje($total[0],$salidas[0]) ?></td>
<td><? echo $salidas[0] ?></td>
</tr>
<tr >
<th scope="row"><div align="left">Total</div></th>
<td><? echo porcentaje($total[0],$total[0]) ?></td>
<td><? echo $total[0] ?></td>
</tr>
</table>
</div>
  #2 (permalink)  
Antiguo 25/11/2008, 19:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

Puedes añadir a tu css:

table {float: left;}
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 25/11/2008, 19:31
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

Cita:
Iniciado por Mikmoro Ver Mensaje
Puedes añadir a tu css:

table {float: left;}

tienes razon muchas gracias ... pero ahora me quedo así



como lo hago para dejarle un espacio entre ellos
el css es :
Cita:
.alex table, .alex td
{
border : 1px solid #CCC;
border-collapse : collapse;
font : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
}
.alex table
{
float:left;
border :none;
border :1px solid #CCC;
}
.alex thead th,
.alex tbody th
{
background : #FFF url(th_bck.gif) repeat-x;
color : #666;
padding : 5px 10px;
border-left : 1px solid #CCC;
}
.alex tbody th
{
background : #fafafb;
border-top : 1px solid #CCC;
text-align : left;
font-weight : normal;
}
.alex tbody tr td
{
padding : 5px 10px;
color : #666;
}
.alex tbody tr:hover
{
background : #FFF url(tr_bck.gif) repeat;
}

.alex tbody tr:hover td
{
color : #454545;
}
.alex tfoot td,
.alex tfoot th
{
border-left : none;
border-top : 1px solid #CCC;
padding : 4px;
background : #FFF url(foot_bck.gif) repeat;
color : #666;
}
.alex caption
{
text-align : left;
font-size : 120%;
padding : 10px 0;
color : #666;
}
.alex table a:link
{
color : #666;
}
.alex table a:visited
{
color : #666;
}
.alex table a:hover
{
color : #003366;
text-decoration : none;
}
.alex table a:active
{
color : #003366;
}
  #4 (permalink)  
Antiguo 25/11/2008, 19:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

Puedes darle un margin-left o right, lo que te convenga por el resto del diseño.

.alex table {float:left;
border :1px solid #CCC;
margin-left: 20px;
}

(te quito el border none, porque border:none y luego declarar un borde tiene poco sentido)
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 25/11/2008, 19:40
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

Cita:
Iniciado por Mikmoro Ver Mensaje
Puedes darle un margin-left o right, lo que te convenga por el resto del diseño.

.alex table {float:left;
border :1px solid #CCC;
margin-left: 20px;
}

(te quito el border none, porque border:none y luego declarar un borde tiene poco sentido)

te pasaste muchas gracias!!!
ddemasiadas gracias!!

saludos
  #6 (permalink)  
Antiguo 25/11/2008, 19:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 26/11/2008, 20:24
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: posicionamiento de tablas :S

¬¬ por que nunka llego a time para ayudar a resolver sus problemas

a lagente ¬¬



bueno bye
  #8 (permalink)  
Antiguo 28/11/2008, 09:40
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

Cita:
Iniciado por danistrein Ver Mensaje
¬¬ por que nunka llego a time para ayudar a resolver sus problemas

a lagente ¬¬



bueno bye
si me puedes ayudar!!!! mira abajo
  #9 (permalink)  
Antiguo 28/11/2008, 09:41
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

bien todo bien .... pero como lo hago para poder separarlo por secciones ... miren la foto ..





quiero pasar para abajo las 2 tablas ... como lo hago?
  #10 (permalink)  
Antiguo 28/11/2008, 10:55
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: posicionamiento de tablas :S

si me muestras el codigo html te podria ayudar, igualmente prueba poniendo un <br />
__________________
Visita la mejor web: http://infoadictos.net
  #11 (permalink)  
Antiguo 28/11/2008, 11:19
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

Cita:
Iniciado por shurshok Ver Mensaje
si me muestras el codigo html te podria ayudar, igualmente prueba poniendo un <br />
ahi va....

Cita:
<table width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<? $total_pais=0;
while($row=mysql_fetch_array($query)){
if($row['pais']=='Chile')
$nacional=$row['total'] ?>
<th scope="row"><div align="left"><? echo $row['pais']; ?></div></th>
<td align="right"><? echo porcentaje($total1[0],$row['total']); ?></td>
<td align="right"><? echo $row['total']; ?></td>
</tr>
<? } ?>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>

<table width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right"><? echo porcentaje($total1[0],$nacional); ?></td>
<td align="right"><? echo $nacional; ?></td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right"><? echo porcentaje($total1[0],$total1[0]-$nacional); ?></td>
<td align="right"><? echo $total1[0]-$nacional; ?></td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>
  #12 (permalink)  
Antiguo 28/11/2008, 11:20
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

Mikmoro ayuda!!!!
  #13 (permalink)  
Antiguo 28/11/2008, 11:24
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 9 años, 4 meses
Puntos: 105
Respuesta: posicionamiento de tablas :S

no entiendo bien el problema la verdad.... pero no se solucionaria haciendo una tabla mayor para todo.... osea como un MasterTable con borde cero(0)..... en la cual en cada celda vaya una tabla y ahora si manejarias donde quieres que vaya cada una......

Suerte y Que Dios te Bendiga.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #14 (permalink)  
Antiguo 28/11/2008, 11:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

Mira, es fácil.
Si queremos afectar a todos los elementos de un tipo (como table), o a todos los que están dentro de tal contenedor, lo hacemos como hemos hecho hasta ahora, poniendo la propiedad en el selector de la etiqueta

table {...}

Pero si lo que queremos es afectar sólo a algunos de ellos, lo más fácil es asiganrles una clase y poner propiedades sólo para los de esa clase.

Tu tienes tres tablas; dos quieres que puedan ponerse al lado y la primera no. La manera es:

<table>....</table>
<table class="seccion">...</table>
<table class="seccion">...</table>

y ahora en la css:

table.seccion {float: left;...}

¿Lo ves claro?
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 29/11/2008, 11:18
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

Cita:
Iniciado por Mikmoro Ver Mensaje
Mira, es fácil.
Si queremos afectar a todos los elementos de un tipo (como table), o a todos los que están dentro de tal contenedor, lo hacemos como hemos hecho hasta ahora, poniendo la propiedad en el selector de la etiqueta

table {...}

Pero si lo que queremos es afectar sólo a algunos de ellos, lo más fácil es asiganrles una clase y poner propiedades sólo para los de esa clase.

Tu tienes tres tablas; dos quieres que puedan ponerse al lado y la primera no. La manera es:

<table>....</table>
<table class="seccion">...</table>
<table class="seccion">...</table>

y ahora en la css:

table.seccion {float: left;...}

¿Lo ves claro?
no me sale ... no entiendo cual es el problema, tambien hay q oensar que nesecito ocupar el css ...
  #16 (permalink)  
Antiguo 29/11/2008, 11:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

Cita:
Iniciado por shembao Ver Mensaje
no me sale ... no entiendo cual es el problema, tambien hay q oensar que nesecito ocupar el css ...
No entiendo esta frase.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 01/12/2008, 07:55
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

Cita:
Iniciado por Mikmoro Ver Mensaje
No entiendo esta frase.
bueno ... vamos a explicarnos por parte ...

en este momento se ve de la siguiente manera



el codigo es:

Cita:
<div style="margin-left:20px;" >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption>
Flujo General Ingreso/Salida
</caption>
<tr >
<th width="39%" scope="col">Tipo Registro</th>
<th align="center" width="20%" scope="col">%</th>
<th align="center" width="25%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingresos</div></th>
<td align="right"><? echo porcentaje($total[0],$ingresos[0]) ?></td>
<td align="right"><? echo $ingresos[0] ?></td>
</tr>
<tr>
<th scope="row"><div align="left">Salidas</div></th>
<td align="right"><? echo porcentaje($total[0],$salidas[0]) ?></td>
<td align="right"><? echo $salidas[0] ?></td>
</tr>
<tr >
<th scope="row"><div align="left" class="Estilo1">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total[0],$total[0]) ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total[0] ?></span></td>
</tr>
</table>
</div>

/*** DOS ULTIMAS TABLAS ***/

<div >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<? $total_pais=0;
while($row=mysql_fetch_array($query)){
if($row['pais']=='Chile')
$nacional=$row['total'] ?>
<th scope="row"><div align="left"><? echo $row['pais']; ?></div></th>
<td align="right"><? echo porcentaje($total1[0],$row['total']); ?></td>
<td align="right"><? echo $row['total']; ?></td>
</tr>
<? } ?>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>

<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right"><? echo porcentaje($total1[0],$nacional); ?></td>
<td align="right"><? echo $nacional; ?></td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right"><? echo porcentaje($total1[0],$total1[0]-$nacional); ?></td>
<td align="right"><? echo $total1[0]-$nacional; ?></td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1"><? echo porcentaje($total1[0], $total1[0]); ?></span></td>
<td align="right"><span class="Estilo1"><? echo $total1[0]; ?></span></td>
</tr>
</table>
</div>
SIN embargo si en la segunda etiqueta div coloco class='alex'

se arregla y queda de la siguiente manera:




el codigo del css es:

Cita:
/*
Grey Suits you Sir. Please host the images on your own server.
written by Stuart Colville http://www.muffinresearch.co.uk
*/


.alex table, .alex td
{
border : 1px solid #CCC;
border-collapse : collapse;
font : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
font:small
}
.alex table
{
float:left;
margin-left:20px;
border :1px solid #CCC;
}
table.seccion
{
margin-left:20px;
border :1px solid #CCC;
}
.alex thead th,
.alex tbody th
{
background : #FFF url(th_bck.gif) repeat-x;
color : #666;
padding : 5px 10px;
border-left : 1px solid #CCC;
}
.alex tbody th
{
background : #fafafb;
border-top : 1px solid #CCC;
font-weight : normal;
}
.alex tbody tr td
{
padding : 5px 10px;
color : #666;
}
.alex tbody tr:hover
{
background : #FFF url(tr_bck.gif) repeat;
}

.alex tbody tr:hover td
{
color : #454545;
}
.alex tfoot td,
.alex tfoot th
{
border-left : none;
border-top : 1px solid #CCC;
padding : 4px;
background : #FFF url(foot_bck.gif) repeat;
color : #666;
}
.alex caption
{
text-align : center;
font-size : 120%;
padding : 10px 0;
color : #666;
}
.alex table a:link
{
color : #666;
}
.alex table a:visited
{
color : #666;
}
.alex table a:hover
{
color : #003366;
text-decoration : none;
}
.alex table a:active
{
color : #003366;
}


como lo hago???

ya que si no le coloco <div class='alex'> queda como el primer dibujo ... .????

help!!!
  #18 (permalink)  
Antiguo 01/12/2008, 08:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

Bueno, es que como te decía yo no lo haría así: lo que haría sería quitar la clase "alex" de la primera tabla i dejársela a las otras dos, y luego los selectores sería tipo:

table.alex {...}
table.alex td {...}

Sólo con que le quites esa clase a la primera tabla y pongas esto:

table.alex {float: left;}

ya te tiene que quedar como quieres.

Si no queda claro luego te hago un ejemplo, pero mejor que el PHP pon el código HTML generado en el navegador.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 01/12/2008, 08:41
 
Fecha de Ingreso: febrero-2008
Mensajes: 73
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: posicionamiento de tablas :S

lo que deseo en realidad es que me quede como esta en la segunda imagen ... eso esta bien ... pero como lo hago ahora para insertar una nueva fila ???
por ejemplo quiero insertar una tabla nueva y que vaya sola en la fila ... como lo hago?

a todo esto se me olvidaba ... si le quito la clase alex a la primera tabla ... se va el estilo css ....

aca va el codigo html:

Cita:
<div style="margin-left:20px;" >
<table class="alex" width="30%" border="1" cellspacing="1">
<caption>
Flujo General Ingreso/Salida
</caption>
<tr >
<th width="39%" scope="col">Tipo Registro</th>
<th align="center" width="20%" scope="col">%</th>
<th align="center" width="25%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingresos</div></th>
<td align="right">53.3</td>
<td align="right">391</td>
</tr>
<tr>
<th scope="row"><div align="left">Salidas</div></th>
<td align="right">46.7</td>
<td align="right">342</td>
</tr>
<tr >
<th scope="row"><div align="left" class="Estilo1">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">733</span></td>
</tr>
</table>
</div>

<hr />

<div class="alex" >
<h4 >Ingresos</h4>
<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row"><div align="left">Perú</div></th>
<td align="right">2.8</td>
<td align="right">7</td>
</tr>
<th scope="row"><div align="left">Otro</div></th>
<td align="right">7.7</td>
<td align="right">19</td>
</tr>
<th scope="row"><div align="left">Chile</div></th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<th scope="row"><div align="left">Bolivia</div></th>
<td align="right">10.1</td>
<td align="right">25</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>

<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right">20.6</td>
<td align="right">51</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>


</div>
  #20 (permalink)  
Antiguo 01/12/2008, 09:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

Como veo que no me entiendes esta tarde te hago un ejemplo.
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 01/12/2008, 11:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: posicionamiento de tablas :S

Mira, esto es lo que te quiero decir: no hace falta que el div tenga una clase especial, sino que les pongo las misma a ambos. Lo que hago es que las tablas que quiero que se pongan al lado tienen un float:left, y las que no, no:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Tablas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.bloque {margin-left:20px;}
.bloque table, .bloque td {border : 1px solid #CCC;
border-collapse : collapse;
font : small/1.5 "Tahoma", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
font:small
}
.bloque table {margin-left:20px;
border :1px solid #CCC;
}
table.seccion {margin-left:20px;
border :1px solid #CCC;
}
.bloque thead th,
.bloque tbody th {background : #FFF url(th_bck.gif) repeat-x;
color : #666;
padding : 5px 10px;
border-left : 1px solid #CCC;
}
.bloque tbody th {background : #fafafb;
border-top : 1px solid #CCC;
font-weight : normal;
}
.bloque tbody tr td {padding : 5px 10px;
color : #666;
}
.bloque tbody tr:hover {background : #FFF url(tr_bck.gif) repeat;}

.bloque tbody tr:hover td {color : #454545;}
.bloque tfoot td,
.bloque tfoot th {border-left : none;
border-top : 1px solid #CCC;
padding : 4px;
background : #FFF url(foot_bck.gif) repeat;
color : #666;
}
.bloque caption {text-align : center;
font-size : 120%;
padding : 10px 0;
color : #666;
}
.bloque table a:link {color : #666;}
.bloque table a:visited {color : #666;}
.bloque table a:hover {
color : #003366;
text-decoration : none;
}
.bloque table a:active {
color : #003366;
}
table.alex {float: left;}
</style>
</head>
<body>
<div class="bloque" >
<table width="30%" border="1" cellspacing="1">
<caption>
Flujo General Ingreso/Salida
</caption>
<tr >
<th width="39%" scope="col">Tipo Registro</th>
<th align="center" width="20%" scope="col">%</th>
<th align="center" width="25%" scope="col">Total</th>
</tr>
<tr>
<th scope="row"><div align="left">Ingresos</div></th>
<td align="right">53.3</td>
<td align="right">391</td>
</tr>
<tr>
<th scope="row"><div align="left">Salidas</div></th>
<td align="right">46.7</td>
<td align="right">342</td>
</tr>
<tr >
<th scope="row"><div align="left" class="Estilo1">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">733</span></td>
</tr>
</table>
</div>

<hr />

<div class="bloque">
<h4 >Ingresos</h4>
<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Detallado)
</caption>
<tr >
<th width="25%" scope="col">Pais</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row"><div align="left">Perú</div></th>
<td align="right">2.8</td>
<td align="right">7</td>
</tr>
<th scope="row"><div align="left">Otro</div></th>
<td align="right">7.7</td>
<td align="right">19</td>
</tr>
<th scope="row"><div align="left">Chile</div></th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<th scope="row"><div align="left">Bolivia</div></th>
<td align="right">10.1</td>
<td align="right">25</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>

<table class="alex" width="30%" border="1" cellspacing="1">
<caption align="center">
Ingreso Contenedores por Pa&iacute;s (Simplificado)
</caption>
<tr >
<th width="25%" scope="col">Procedencia</th>
<th align="center" width="20%" scope="col" >%</th>
<th align="center" width="25%" scope="col">Ingresos</th>
</tr>
<tr >
<th scope="row">Nacional</th>
<td align="right">79.4</td>
<td align="right">196</td>
</tr>
<tr >
<th scope="row">Extranjeros</th>
<td align="right">20.6</td>
<td align="right">51</td>
</tr>
<tr>
<th scope="row"><div class="Estilo1" align="left">Total</div></th>
<td align="right"><span class="Estilo1">100</span></td>
<td align="right"><span class="Estilo1">247</span></td>
</tr>
</table>
</div>
</body>
</html>
Ahora puedes poner tantos div bloque como quieras, que irán unos debajo de otros, y tantas tablas como quieras en cada uno; si una tabla tiene la clase .alex se pondrá a la derecha de otra con la misma clase, y si no la tiene, irá a la siguiente línea.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:34.