css-tablas

Si deseas crear 3 tablas con CSS que ocupen el ancho de tu container  (div), solo debes seguir estos pasos. Mediante CSS, la propiedad float y overflow, podremos crear 3 tablas “fluidas” (se dice por la referencia a float).

Código CSS a implementar:

.xouter3{
width:80%;
border:1px solid #000;
float:left;
margin:15px 0 15px 9%;
}
.xleftcol3{
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol3 {
overflow:auto;
background:#eff2df;
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}

.xrightcol3 {
float:right;
width: 33%;
background:#d2da9c;
position:relative;
}

Código HTML a implementar:

<div class="xouter3">
<div class="xleftcol3">
<p>Columna de la derecha: </p>
</div>
<div class="xrightcol3">
<p>Columna de la izquierda: </p>
</div>
<div class="xmiddlecol3">
<div class="xinner3">
<p>Columna central: </p>
</div>
</div>
</div>

Con estos sencillos pasos ya tendremos las 3 tablas (columnas) por medio de CSS.

En IE pueden aparecer pequeños problemas, como por ejemplo, que las tablas no llenen todo el div o que se superpongan encima de otras:

iedrop1

¡Nada es perfecto!

Vía | Pmob