leit0s
Eta
Verificado
Verificación en dos pasos activada
Buenas noches betas me podrían ayudar como hacer responsive una tabla echa con Div, la tabla debe ingresar en un área de 640px y al adaptarse a la resolución mas pequeña creo que 300px como contiene (3 campos) en el lado izquierdo y lado derecho; el lado derecho pase a la parte de abajo y el izquierdo quede arriba así se aprecien ambos contenidos, aun no lo logro alguien que me de una mano porfa, de antemano gracias.
Inserir CODE, HTML ou PHP:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Prueba tabla con divs</title>
<style type="text/css">
.Table
{
display: table;
color: #333333;
text-align: left;
font: normal normal 11px Verdana,Geneva,sans-serif;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
background: #E4ECFF;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: 1px solid color:#E4ECFF;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
font-size: 14px;
}
</style>
</head>
<body>
<div class="Title">
<p> Reparto </p>
</div>
<div class="Table">
<div class="Heading">
<!-- Columna Izquierda-->
<div class="Cell">
</div>
<div class="Cell">
<p>Actor</p>
</div>
<div class="Cell">
<p>Personaje</p>
</div>
<!-- Columna Derecha -->
<div class="Cell">
</div>
<div class="Cell">
<p>Actor</p>
</div>
<div class="Cell">
<p>Personaje</p>
</div>
</div>
<div class="Row">
<!-- Fila de columna Izquierda 1-->
<div class="Cell">
<p><img alt="Foto de Daniel Radcliffe" src="http://3.bp.blogspot.com/-BcFjuq7rZRI/VCo4h_CoqhI/AAAAAAAAAAw/VnQ-CoZlJ2Q/s1600/no_foto_thumb.jpg" height="39" title="Enric Benavent" width="30"></p>
</div>
<div class="Cell">
<p>Daniel Radcliffe</p>
</div>
<div class="Cell">
<p>Harry James Potter</p>
</div>
<!-- Fila de columna Derecha 1-->
<div class="Cell">
<p><img alt="Foto de Rupert Grint" src="http://3.bp.blogspot.com/-BcFjuq7rZRI/VCo4h_CoqhI/AAAAAAAAAAw/VnQ-CoZlJ2Q/s1600/no_foto_thumb.jpg" height="39" title="Enric Benavent" width="30"></p>
</div>
<div class="Cell">
<p>Rupert Grint</p>
</div>
<div class="Cell">
<p>Ron Weasley</p>
</div>
</div>
<!-- Fila de columna Izquierda 2-->
<div class="Row">
<div class="Cell">
<p><img alt="Foto de Emma Watson" src="http://3.bp.blogspot.com/-BcFjuq7rZRI/VCo4h_CoqhI/AAAAAAAAAAw/VnQ-CoZlJ2Q/s1600/no_foto_thumb.jpg" height="39" title="Enric Benavent" width="30"></p>
</div>
<div class="Cell">
<p>Emma Watson</p>
</div>
<div class="Cell">
<p>Hermione Granger</p>
</div>
<!-- Fila de columna Derecha 2-->
<div class="Cell">
<p><img alt="Foto de Richard Bremmer" src="http://3.bp.blogspot.com/-BcFjuq7rZRI/VCo4h_CoqhI/AAAAAAAAAAw/VnQ-CoZlJ2Q/s1600/no_foto_thumb.jpg" height="39" title="Enric Benavent" width="30"></p>
</div>
<div class="Cell">
<p>Richard Bremmer</p>
</div>
<div class="Cell">
<p>Lord Voldemort</p>
</div>
</div>
</div>
</body>
