1

Estoy tratando de hacer un formato de un carnet en HTML para lo cual estoy anidando tablas.

El problema es en que se está montando una tabla sobre otra.

¿Que error estoy cometiendo?

<!DOCTYPE html>
<html lang="es">
  <head>
      <meta charset="utf-8">
      <title>Carnet</title>
      <style>
      @page{
          size: 21.6cm 6cm;
          margin: -2px ;
          padding: 0px;
      }

      table{
          empty-cells: hide;
          border: 1px solid;
      }
      td {
          border:hidden;
      }
      .logo{
          width: 80px;
          height: 80px;
      }
      .titulo{
          font-size: 14px;
          text-align: center;
          font: small-caps 90% serif;
      }
      .detalle{
          font-size: 14px;
      }
      .principal{
          width: 120%;
          margin: -2px;
          border: none;
          background-color: red;
      }
      .principaldos{
          width: 80%;
          margin: -2px;
          border: none;
          background-color: green;
      }
      .subtitulo{
          text-align: center;
          font-weight: 700;
      }

      </style>
  </head>
  <body>

      <table>
          <tr>
              <td>
                  <table class="principal">
                      <tr>
                          <td class="logo"><img src="images/logoSisben.png" style="width:100%"/></td>
                          <td class="titulo" colspan="3">Sistema de Identificación y Clasificación de Potenciales Beneficiarios para Programas Sociales</td>
                      </tr>
                      <tr>
                          <td class="subtitulo" colspan="4">GIRARDOT - CUNDINAMARCA</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Carnet No.:</td>
                          <td class="detalle" colspan="2">1790</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Fecha de nacimiento:</td>
                          <td class="detalle"> 02/12/1952 </td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Doc. de Identidad:</td>
                          <td class="detalle" colspan="2"> CC N° 21116472</td>
                      </tr>
                      <tr>
                          <td class="detalle">Nombre:</td>
                          <td class="detalle" colspan="3"> MARIA TERESA GARZON BAQUERO</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Programa:</td>
                          <td class="detalle" colspan="2"> DESPLAZADOS</td>
                      </tr>
                  </table>
              </td>
              <td>
                  <table class="principaldos">
                      <tr>
                          <td class="titulo" colspan="4">Este carnet es intransferible. Si es usado por otra persona, sera confiscado. En caso de perdida favor avisar a la administracion Municipal</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Fecha de Expedición</td>
                          <td class="detalle" colspan="2">Fecha de Vencimiento</td>
                      </tr>
                      <tr>
                          <td colspan="3" rowspan="3">
                              Firma Autorizada
                          </td>
                      </tr>
                      <tr>
                          <td>DIEGO FERNANDO NUÑEZ B.</td>
                      </tr>
                      <tr>
                          <td>DIRECTOR</td>
                      </tr>
                  </table>
              </td>
          </tr>
      </table>
  </body>
</html>

1
  • Cuando se tiene un código que no no funciona como se espera, debe intentar reproducirse el error usando el código más sencillo posible. Si se logra describir el error, además del código la pregunta debe incluir una descripción del resultado obtenido y el esperado. Referencia ejemplo mínimo verificable
    – Rubén
    Commented el 9 mar. 2017 a las 3:34

2 respuestas 2

2

El error

La tabla con clase principal tiene un width de 120% lo que provoca que dicha tabla supere por un 20% el espacio del contenedor.

Solución

Modificar la clase principal y establecer un width del 100%.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
  <head>
      <meta charset="utf-8">
      <title>Carnet</title>
      <style>
      @page{
          size: 21.6cm 6cm;
          margin: -2px ;
          padding: 0px;
      }

      table{
          empty-cells: hide;
          border: 1px solid;
      }
      td {
          border:hidden;
      }
      .logo{
          width: 80px;
          height: 80px;
      }
      .titulo{
          font-size: 14px;
          text-align: center;
          font: small-caps 90% serif;
      }
      .detalle{
          font-size: 14px;
      }
      .principal{
          width: 100%;
          margin: -2px;
          border: none;
          background-color: red;
      }
      .principaldos{
          width: 80%;
          margin: -2px;
          border: none;
          background-color: green;
      }
      .subtitulo{
          text-align: center;
          font-weight: 700;
      }

      </style>
  </head>
  <body>

      <table>
          <tr>
              <td>
                  <table class="principal">
                      <tr>
                          <td class="logo"><img src="images/logoSisben.png" style="width:100%"/></td>
                          <td class="titulo" colspan="3">Sistema de Identificación y Clasificación de Potenciales Beneficiarios para Programas Sociales</td>
                      </tr>
                      <tr>
                          <td class="subtitulo" colspan="4">GIRARDOT - CUNDINAMARCA</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Carnet No.:</td>
                          <td class="detalle" colspan="2">1790</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Fecha de nacimiento:</td>
                          <td class="detalle"> 02/12/1952 </td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Doc. de Identidad:</td>
                          <td class="detalle" colspan="2"> CC N° 21116472</td>
                      </tr>
                      <tr>
                          <td class="detalle">Nombre:</td>
                          <td class="detalle" colspan="3"> MARIA TERESA GARZON BAQUERO</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Programa:</td>
                          <td class="detalle" colspan="2"> DESPLAZADOS</td>
                      </tr>
                  </table>
              </td>
              <td>
                  <table class="principaldos">
                      <tr>
                          <td class="titulo" colspan="4">Este carnet es intransferible. Si es usado por otra persona, sera confiscado. En caso de perdida favor avisar a la administracion Municipal</td>
                      </tr>
                      <tr>
                          <td class="detalle" colspan="2">Fecha de Expedición</td>
                          <td class="detalle" colspan="2">Fecha de Vencimiento</td>
                      </tr>
                      <tr>
                          <td colspan="3" rowspan="3">
                              Firma Autorizada
                          </td>
                      </tr>
                      <tr>
                          <td>DIEGO FERNANDO NUÑEZ B.</td>
                      </tr>
                      <tr>
                          <td>DIRECTOR</td>
                      </tr>
                  </table>
              </td>
          </tr>
      </table>
  </body>
</html>

4
  • Y como puedo fijar el ancho ya que necesito que quede igual el ancho de las dos tablas
    – jhon1946
    Commented el 9 mar. 2017 a las 21:58
  • @jhon1946, si quieres que ambas tablas tengan el mismo ancho, tambien deberias modificar la clase principaldos y establecer el width a 100%
    – Marcos
    Commented el 9 mar. 2017 a las 22:00
  • Marcos gracias por colaborarme, ya estableci en ambos width de 100% pero siempre queda una mas ancha que la otra, lo que estoy buscando es hacer un carnet y cada tabla es una cara del carnet para lo cual requiero que queden divididas las tablas por toda la mitad de la tabla que las contienen. Agradezco si me ayudas
    – jhon1946
    Commented el 9 mar. 2017 a las 22:08
  • @jhon1946, se me ocurre que si es un carnet, entonces seguramente es para imprimirse, por lo que tranquilamente podrías indicar un width y height fijo en pixels para ambas tablas.
    – Marcos
    Commented el 10 mar. 2017 a las 11:00
2

Agrega el siguiente estilo en el objeto table

table {
    display: table-cell;
}

Saludos.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.