Foros del Web - Ver Mensaje Individual

Mikmoro · #21 (**permalink**) 01/12/2008, 11:18

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