Table nested in html

Navigation
0

I am trying to make a card format in HTML for which I am nesting tables.

The problem is that one table is being mounted on another.

What mistake am I making? 

<!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>
    
asked by jhon1946 09.03.2017 в 04:13
source

2 answers

2

The error

The class table principal has a width of 120% which causes this table to exceed the space of the container by 20% .

Solution

Modify class principal and set width of 100% .

Example: 

<!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>
    
answered by 09.03.2017 / 13:40
source
2

Add the following style in the table object 

table {
    display: table-cell;
}

Greetings.

    
answered by 09.03.2017 в 04:18
How to give my style to the footer, with an image ...? How to make an UPDATE on a BD SQL Server from C Sharp