Ayuda para hacer una tabla Div Responsiva

leit0s · 2 Oct 2014

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.

Insertar CODE, HTML o 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>

Cicklow · 2 Oct 2014

[MENTION=35984]leit0s[/MENTION] no te conviene usar bootstrap y no renegar?... bootstrap permite sacar lo que no necesitas, en tu caso solo necesitas las grillas...
Customize and download Â· Bootstrap (grid system) y armas todo

HTML:

<div class="row">
<div class="col-md-2">contenido</div>
</div>

CSS Â· Bootstrap

leit0s · 2 Oct 2014

Muchas gracias cicklow, pues estoy recién comenzando y es para meter en un blogspot, pero como lo veo tomare como guía para los códigos pues veo que todo esta orientado a responsive, tendre que leer mas, mil gracias amigo.

cicklow dijo:
[MENTION=35984]leit0s[/MENTION] no te conviene usar bootstrap y no renegar?... bootstrap permite sacar lo que no necesitas, en tu caso solo necesitas las grillas...
Customize and download Â· Bootstrap (grid system) y armas todo

HTML:

<div class="row"> <div class="col-md-2">contenido</div> </div>

CSS Â· Bootstrap

Ayuda para hacer una tabla Div Responsiva

leit0s

Cicklow

leit0s