Foros del Web » Creando para Internet » CSS »

Tabla con css

Estas en el tema de Tabla con css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/05/2016, 05:34
 
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
  #2 (permalink)  
Antiguo 25/05/2016, 08:14
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años
Puntos: 468
Respuesta: Tabla con css

No entiendo una cosa, antes se usaban las tablas para estructurar el contenido, cosa que ahora ya no se hace y es una mala práctica ( por lo menos desde mi punto de vista ) y el único uso que se les da a las tablas es para cuando verdaderamente queremos mostrar una tabla.

Si es tu caso por que no usas una tabla ? Luego ya le das los estilos css que necesites.
__________________
No te olvides de dar +1 a quien te echa un cable ;)

Etiquetas: background, color, tabla, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:25.