私はこのトピックに関するすべてのアドバイスを読んだことがありますが、私の場合はそうではないようです。
私はあなたが見ることができるように、このテーブルを持って、コンテナ(「DIV」要素)に配置されていますCSSをコンテナにフィッティングする
<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;
}
UPDATE:私が言及したウェブサイトの完全なコードを更新しています要求ごととして
:
<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>
UPDATE 2:
CSS、テーブル/ CONTのためのainer:
投稿から 'overflow:auto;'を追加しました。プロパティを 'コンテナ'クラスに変換します。アクセス方法私はちょうどいくつかのidのコンテンツを広告し、残りの部分をこの方法で並べ替えると思います。
.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;
}
'table'は常にコンテンツの幅と高さになります。あなたはそれについて何もできません。あなたの 'table'は、それぞれの' tr'が正確に同じ数のセルを含んでいなければならないので無効です。 '' colspan'を使って 'td'を置き換えない限り、列の合計は行ごとに同じでなければなりません。 – connexo
基本的にあなたが示唆しているのは、私がテーブル内の画像のサイズを操作するということですか? – CNB
なぜここでテーブルを使用していますか?これは表形式のデータのようには見えません。これはあなたがテーブルを使う唯一の方法です。**レイアウトの目的で 'テーブル 'を使用してはなりません。** – connexo