2016-12-03 10 views
1

私はこのトピックに関するすべてのアドバイスを読んだことがありますが、私の場合はそうではないようです。
私はあなたが見ることができるように、このテーブルを持って、コンテナ(「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; 

} 
+0

'table'は常にコンテンツの幅と高さになります。あなたはそれについて何もできません。あなたの 'table'は、それぞれの' tr'が正確に同じ数のセルを含んでいなければならないので無効です。 '' colspan'を使って 'td'を置き換えない限り、列の合計は行ごとに同じでなければなりません。 – connexo

+0

基本的にあなたが示唆しているのは、私がテーブル内の画像のサイズを操作するということですか? – CNB

+0

なぜここでテーブルを使用していますか?これは表形式のデータのようには見えません。これはあなたがテーブルを使う唯一の方法です。**レイアウトの目的で 'テーブル 'を使用してはなりません。** – connexo

答えて

1

実際にコードスニペットがないと、何が起こっているのかわかりません。しかし、私はあなたがテーブルがdivよりも高く重なっていることを意味すると思います。

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

がところで表示:固定が存在していないあなたは、このようなコンテナからの高さを削除する場合

だから多分あなたが行われています。

上記のコードが機能しない場合は、動作中のコードスニペット(例:jsfiddle)またはライブウェブサイトへのリンクを提供してください。

+0

表示:固定、存在しないが、テーブルレイアウト:固定。それは私が試したことです。私がコンテナから高さを取り除いても、テーブルが大きすぎるという事実は変わっていません。それは400x200pxです。 – CNB

+0

私の答えでは動作するコードスニペットやリンクがなくてももしかして。 「大きすぎる」とはどういう意味ですか?広すぎたり高すぎたりしますか?申し訳ありませんが、コードが表示されない場合は、アドバイスできません。 https://jsfiddle.netでコードサンプルを作成し、スニペットを保存してリンクをここに投稿することができます。 –

+0

OK、完全なウェブサイトのコードを更新します。それは助けになるだろうか?それは非常に短いコードだという心配はありません。練習のために。共演ではない。 – CNB

1

私はここを参照してください唯一のオプションはどちらかにあるあなたがしようとすると見つける必要があるでしょう(tabletransform: scale(0.3);を適用コンテナをスクロールすることにより、テーブルの残りの部分が利用可能(コンテナ上overflow: auto;)を作ります正確にフィットさせる要因)。

そして、すでに述べたように、1行あたりの列数を修正してください。それらはすべての行で同一でなければなりません。

+0

ありがとう、それは完全に問題を解決しませんでしたが、それは大きな助けになりました。私はここからそれを取ることができると思う。再度、感謝します! – CNB

0

ご迷惑をおかけして申し訳ありません。最終的には内容を操作し、すべてのパディングとマージンを0に設定してソートしました。

関連する問題