Question

我已经阅读了有关该主题的所有建议，但是在我的案例中似乎没有。
我有这个表，如你所见，放在一个容器（'div'元素）中：

<div class="container">
  <table>
    <tr>
      <td><img src="../img/3.jpg"></td>
      <td colspan="3"><img src="../img/4.jpg"></td>
    </tr>
    <tr>
      <td rowspan="2"><img src="../img/5.jpg"></td>
      <td><img src="../img/1.jpg"></td>
      <td rowspan="2" colspan="2"><img src="../img/2.jpg"></td>
    </tr>
    <tr>
      <td><img src="../img/6.jpg"></td>
    </tr>
  </table>
</div>

无论我做什么，我都无法修复div中的表格。我尝试了display: fixed，自动宽度等等。它只是顽固地“溢出”到处都是。
不确定我做错了什么。容器的CSS，只是一个适合我网站的完美空间，如下：

.container {
display: inline-block;
width: 400px;
height: 200px;
border: 1px solid black;
}

更新

根据要求，我正在更新上述网站的完整代码：

<html>
  <head>
    <title>Reflexiones</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/inicio.css">
    <link rel="stylesheet" type="text/css" href="../css/reflexiones.css">
    <link rel="stylesheet" type="text/css" href="../css/comun.css">
  <body>
  </body>
  <section class="caja">
    <nav class="strip" id="s_top">
      <a id="line" href="index.html">INICIO</a>
      <a id="line" href="audio.html">AUDIO</a>
      <a id="line" href="video.html">VIDEOS</a>
      <a id="line" class="bold" href="reflexiones.html">REFLEXIONES</a>
      <a href="contactar.html">CONTACTAR</a>
    </nav>
    <section>
      <p>
        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. <br>
        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. 
      </p>
      <p>
        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.
      </p>
      <p>
        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.
      </p>
      <div class="container">
        <table>
          <tr>
            <td><img src="../img/3.jpg"></td>
            <td colspan="3"><img src="../img/4.jpg"></td>
          </tr>
          <tr>
            <td rowspan="2"><img src="../img/5.jpg"></td>
            <td><img src="../img/1.jpg"></td>
            <td rowspan="2" colspan="2"><img src="../img/2.jpg"></td>
          </tr>
          <tr>
            <td><img src="../img/6.jpg"></td>
          </tr>
        </table>
      </div>
    </section>
    <footer class="strip" id="s_bottom">
      <a id="line" href="index.html">Inicio</a>
      <a id="line" href="audio.html">Audio</a>
      <a id="line" href="video.html">Videos</a>
      <a id="line" class="bold" href="reflexiones.html">Reflexiones</a>
      <a href="contactar.html">Contactar</a>
    </footer>
  </section>
</html>

更新2：

CSS，用于表/容器：

自发布以来我添加了'overflow：auto;'属性为'容器'类。到达那里。我想我只会在内容上添加一些内容，然后按照这种方式对其余内容进行排序。

.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;

}

Answer 1

实际上，如果没有代码段，我只能猜测发生了什么。但我认为你的意思是表格高于div并重叠。

所以如果你从容器中移除高度，也许你已经完成了这样的事情：

.container {
   display: inline-block;
   width: 400px;
   border: 1px solid black;
}

BTW 显示：已修复不存在。

如果上述代码不起作用，请提供一个有效的代码段（例如jsfiddle）或指向实时网站的链接。

Answer 2

我在这里看到的唯一选项是要么通过滚动容器（容器上的overflow: auto;）或应用{来使表的其余部分可用transform: scale(0.3);上的{1}}（您必须尝试找到使其完全合适的因素）。

而且，正如我之前所说，修正每行的cols数量。它们在所有行上必须相同。

CSS拟合表成一个容器

2 个答案: