Hacer que una tabla se ajuste al tamaño de sus elementos.

LordJhony · #1 (**permalink**) 26/07/2016, 11:21

Hola...
Tengo el siguiente código html

Código HTML:

<html>
 <head>
  <title>Angelus Books. The Best Books That I Read</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link href="/Libreria/Vista/CSS/cabecera.css" rel="stylesheet" type="text/css"/>
  <link href="/Libreria/Vista/CSS/buscar.css" rel="stylesheet" type="text/css"/>
 </head>
<body>
<header>
 <!-- Elementos contenidos en el header -->
</header>
<section>
   <div>
     <center>
        <table id="tresultado">
          <tr class="tr">
             <td class="td"><img id="portada" src="imagen1.jpg>
             <br />Nombre imagen 1</td>
             <td class="td"><img id="portada" src="imagen2.jpg>
             <br />Nombre imagen 2</td>
             <td class="td"><img id="portada" src="imagen3.jpg>
             <br />Nombre imagen 3</td>
             <td class="td"><img id="portada" src="imagen4.jpg>
             <br />Nombre imagen 4</td>
     </tr>     
   </table>
  </center>
 </div>
</section>
</body></html>

A ese código le aplico los siguientes estilos css

Código CSS:

Ver original#tresultado{
    background-color: #5C5CA3;        
}
.tr{
    background-color: #5C5CA3;
    width: auto;
    height: 150px;
}
.td{
    background-color: #5C5CA3;
    width: 100px;
    height: auto;
    position: relative;
    top: 110px;    
}
#portada{
    width: 100px;
    height: 150px;  
}

El problema es que las imágenes quedan por fuera de la tabla, y yo necesito que la tabla sea exactamente del tamaño de las figuras incluido sus respectivos nombres. He intentado cambiándole las propiedades width y height a todos los elementos incluida la misma tabla, y aun no logro conseguirlo.
De antemano, gracias por su ayuda.