Tema: Tabla con css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/05/2016, 05:34
jawir
 
Fecha de Ingreso: marzo-2009
Mensajes: 221
Antigüedad: 15 años, 1 mes
Puntos: 0
Tabla con css
Hola tengo un problema con una tabla que estoy intentando hacer con css

El problema es que la última fila se me baja el borde hasta el final del documento.
Os pongo una imagen para que os hagáis una idea

El caso es que cuando lo visualizo en el navegador me sale bien, pero cuando transformo el documento a pdf me ocurre lo siguiente

-------------------
| A | B | C | D |
--------------------
| 52 | 6 | 55 | 24 |
|-------------------
| 452 | 66 | 55 | 24 |
|
|
|
|
|
|
|
-----------------------


Código HTML: 
Ver original
  1. <div id="lineas-informacion">
  2.                                <div class="informacion"> Nota informativa</div>  
  3.                           
  4.                             <div id = "contenedor-lineas-lectura"> 
  5.  
  6.                                   <div class= "contenedor-lineas-tabla">
  7.                                        <div class="linea-tabla-lectura-col-1"> 
  8.                                              <div class="linea-lectura-text-normal">A</div>
  9.                                        </div>
  10.                                        <div class="linea-tabla-lectura-col-2">
  11.                                              <div class="linea-lectura-text-normal">B</div>
  12.                                        </div>
  13.                                        <div class="linea-tabla-lectura-col-3"> 
  14.                                              <div class="linea-lectura-text-normal">C</div>
  15.                                        </div>
  16.                                        <div class="linea-tabla-lectura-col-4">
  17.                                              <div class="linea-lectura-text-normal">D</div>
  18.                                        </div>
  19.                                   </div>
  20.  
  21.                                   <div class= "contenedor-lineas-tabla">
  22.                                        <div class="linea-tabla-lectura-col-1"> 
  23.                                              <div class="linea-lectura-text-normal">52</div>
  24.                                        </div>
  25.                                        <div class="linea-tabla-lectura-col-2">
  26.                                              <div class="linea-lectura-text-normal">6</div>
  27.                                        </div>
  28.                                        <div class="linea-tabla-lectura-col-3"> 
  29.                                              <div class="linea-lectura-text-normal">55</div>
  30.                                        </div>
  31.                                        <div class="linea-tabla-lectura-col-4">
  32.                                              <div class="linea-lectura-text-normal">24</div>
  33.                                        </div>
  34.                                    </div>
  35.  
  36.                                   <div class= "contenedor-lineas-tabla">
  37.                                        <div class="linea-tabla-lectura-col-1"> 
  38.                                              <div class="linea-lectura-text-normal">452</div>
  39.                                        </div>
  40.                                        <div class="linea-tabla-lectura-col-2">
  41.                                              <div class="linea-lectura-text-normal">66</div>
  42.                                        </div>
  43.                                        <div class="linea-tabla-lectura-col-3"> 
  44.                                              <div class="linea-lectura-text-normal">55</div>
  45.                                        </div>
  46.                                        <div class="linea-tabla-lectura-col-4">
  47.                                              <div class="linea-lectura-text-normal">24</div>
  48.                                        </div>
  49.                                   </div>
  50.  
  51.                        
  52.  
  53.                                 </div>  <!--contenedor-lineas-lectura -->
  54.  
  55.                             </div> <!--lineas-informacion -->



Código CSS: 
Ver original
  1. #lineas-informacion{ 
  2.                                    display: inline-block;
  3.                                    top: 0.7cm;
  4.                                    left: 1.1cm;
  5.                                    position: relative;        
  6.                                 }       
  7.       #contenedor-lineas-lectura{ 
  8.                                             background-color: white; 
  9.                                             position: absolute;
  10.                                             display: block;   
  11.                                             top: 1.5cm;
  12.                                             left: 1cm;
  13.                                             width: 11.7cm;
  14.                                           /*  height: 8.4cm;   */     
  15.                                             box-sizing: border-box;
  16.                                       }    
  17.  
  18.   .contenedor-lineas-tabla{
  19.                                                   background-color: white;
  20.                                                   position: relative;
  21.                                                   display: block; 
  22.                                                   width: 8.7cm;
  23.                                                   height: 0.3cm;
  24.                                                   left: 0cm;
  25.                                                   box-sizing: border-box;  
  26.                                               }
  27.  
  28.   .linea-tabla-lectura-col-1{
  29.                                                          position: absolute;
  30.                                                          display: inline-block;  
  31.                                                          left: 0cm;
  32.                                                          width: 3cm;
  33.                                                          box-sizing: border-box;   
  34.                                                          border: 1px solid black;
  35.  
  36.                                                     }
  37.  
  38.                                                     .linea-tabla-lectura-col-2{
  39.                                                          position: absolute;
  40.                                                          display: inline-block;
  41.                                                          left: 3cm;
  42.                                                          width: 3cm;
  43.                                                          box-sizing: border-box;
  44.                                                          border: 1px solid black;
  45.                                                     }
  46.  
  47.                                                     .linea-tabla-lectura-col-3{
  48.                                                          position: absolute;
  49.                                                          display: inline-block;
  50.                                                          left: 6cm;
  51.                                                          width: 3cm;
  52.                                                          box-sizing: border-box;
  53.                                                          border: 1px solid black;
  54.                                                     }
  55.  
  56.                                                     .linea-tabla-lectura-col-4{
  57.                                                          position: absolute;
  58.                                                          display: inline-block;
  59.                                                          left: 9cm;
  60.                                                          width: 3cm;
  61.                                                          box-sizing: border-box;
  62.                                                          border: 1px solid black;
  63.                                                     }
  64.  
  65.                                           
  66.                                                         .linea-lectura-text-normal{
  67.                                                              font-size: 0.62em;
  68.                                                              font-weight:normal;
  69.                                                              text-align:center;
  70.                                                              text-transform: none;
  71.                                                              box-sizing: border-box;
  72.                                                         }


Gracias