CSS fitting table into a container
<p>I've read all advices on the topic, but non of them seems to work in my case. <br>
I've got this table which, as you can see, is placed in a container ('div' element):</p>

<pre><code>&lt;div class="container"&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="../img/3.jpg"&gt;&lt;/td&gt;
      &lt;td colspan="3"&gt;&lt;img src="../img/4.jpg"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td rowspan="2"&gt;&lt;img src="../img/5.jpg"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;img src="../img/1.jpg"&gt;&lt;/td&gt;
      &lt;td rowspan="2" colspan="2"&gt;&lt;img src="../img/2.jpg"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;img src="../img/6.jpg"&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>No matter what I do, I can't fix the table within div. I tried with <code>display: fixed</code>, auto widths and all. it just stubbornly 'spills out' all over the place. 
<br>
Not sure what I am doing wrong. CSS for container, which is just a perfect amount of space to fit it on my website, is as follow:</p>

<pre><code>.container {
display: inline-block;
width: 400px;
height: 200px;
border: 1px solid black;
}
</code></pre>

<p><strong>UPDATE:</strong></p>

<p>As per request I am updating full code of mentioned website:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Reflexiones&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="../css/inicio.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="../css/reflexiones.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="../css/comun.css"&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;section class="caja"&gt;
    &lt;nav class="strip" id="s_top"&gt;
      &lt;a id="line" href="index.html"&gt;INICIO&lt;/a&gt;
      &lt;a id="line" href="audio.html"&gt;AUDIO&lt;/a&gt;
      &lt;a id="line" href="video.html"&gt;VIDEOS&lt;/a&gt;
      &lt;a id="line" class="bold" href="reflexiones.html"&gt;REFLEXIONES&lt;/a&gt;
      &lt;a href="contactar.html"&gt;CONTACTAR&lt;/a&gt;
    &lt;/nav&gt;
    &lt;section&gt;
      &lt;p&gt;
        El 75% de la flora silvestre se poliniza gracias a las abejas y casi el 40% de las frutas y verduras que comemos procede de la polinización, que realizan estos insectos en declive por un "cóctel" de amenazas como los plaguicidas, transgénicos, el ácaro varroa, e incluso la mala acción de apicultores inexpertos. &lt;br&gt;
        Así lo han expresado diversos expertos consultados, que han coincidido en destacar que estos insectos, a menudo molestos, para los habitantes de las ciudades son imprescindibles para la vida. 
      &lt;/p&gt;
      &lt;p&gt;
        Varios factores, entre los que destacan la climatología adversa y el uso de pesticidas prohibidos en otros países de nuestro entorno, han ocasionado en España una fuerte mortandad de las abejas. Además de las pérdidas en la producción de miel y otros productos apícolas, la principal consecuencia de esta fuerte reducción del número de abejas es la escasa polinización tanto de cultivos como de especies silvestres, lo que tiene nefastas repercusiones económicas en muchos cultivos y en cuanto a la biodiversidad de nuestros montes.
      &lt;/p&gt;
      &lt;p&gt;
        En 1999 un estudio sobre la producción de miel de girasol en el oeste de Francia realizado por la Cooperativa France Miel, mostró una caída del 50% en la producción de este tipo de miel desde el año 1994. Este descenso coincide con la puesta en el mercado del insecticida sistémico Gaucho, en 1993, cuya molécula activa es el imidacloprid, que se usaba para el tratamiento de semillas de girasol y maíz. Tras su prohibición en 1999 fue sustituido por el producto comercial Regent cuya molécula activa es el fipronil. Este descenso de producción se acrecentó con el aumento de las superficies tratadas.
      &lt;/p&gt;
      &lt;div class="container"&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;img src="../img/3.jpg"&gt;&lt;/td&gt;
            &lt;td colspan="3"&gt;&lt;img src="../img/4.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td rowspan="2"&gt;&lt;img src="../img/5.jpg"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;img src="../img/1.jpg"&gt;&lt;/td&gt;
            &lt;td rowspan="2" colspan="2"&gt;&lt;img src="../img/2.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;img src="../img/6.jpg"&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;footer class="strip" id="s_bottom"&gt;
      &lt;a id="line" href="index.html"&gt;Inicio&lt;/a&gt;
      &lt;a id="line" href="audio.html"&gt;Audio&lt;/a&gt;
      &lt;a id="line" href="video.html"&gt;Videos&lt;/a&gt;
      &lt;a id="line" class="bold" href="reflexiones.html"&gt;Reflexiones&lt;/a&gt;
      &lt;a href="contactar.html"&gt;Contactar&lt;/a&gt;
    &lt;/footer&gt;
  &lt;/section&gt;
&lt;/html&gt;
</code></pre>

<p><strong>UPDATE 2:</strong></p>

<p>CSS, for table/container:</p>

<p>since posting I've added 'overflow: auto;' property to 'container' class. Getting there. I think I'll just ad some id's to content and sort the rest this way.</p>

<pre><code>.container {

    display: inline-block;
    width: 400px;
    overflow: auto;
    border: 1px solid black;

}

table {

    height: 200px;
    width: 600px;
    table-layout:fixed;
    border-collapse: collapse;

}

td {

    border: 1px solid black;
    height: 50px;
    width: 50px;
    padding: 0px;

}

table img {

    margin: 0px;
    height: 60px;
    width: 90px;

}
</code></pre>