1

<table>100% X 100% http://oxid.co.il/test/table1.htmが設定された html ページがあります。ページを全画面表示にして、すべてのタイプの画面に合わせる必要があるため、使用しています。また、ページにスクロールがあってはなりません。

テーブルをそのままの状態 (左サイズ 50%、右サイズ 50%、下サイズ 10%) のままにしたいのですが、テーブルにコンテンツを追加すると、テーブルのサイズが再調整されてしまい、うまくいきません。

たとえば、大きな画像を追加すると、次のようになります: http://oxid.co.il/test/table2.htm (右側が小さく、下がなくなっています)

<td>画像がの元のサイズに収まるといいのですが。画像を追加style="width:100%;"すると、まだテーブルが壊れています: http://oxid.co.il/test/table3.htm (下部領域は表示されていません)

<div>の中に大きなもの<td>があると、テーブルも壊れます: http://oxid.co.il/test/table4.htm ( が にあることは知ってい<div>ますがpx、パーセンテージに変更することはできません)

サイズを再調整せずにコンテンツを表に収めるにはどうすればよいですか?

ありがとう！

4

1 に答える 1

0

テーブルはレイアウト用ではありません。あなたの質問へのコメントで述べられているように、divを使用するだけではるかに簡単になります。次のコードは、テーブルなしで、必要なことを実行します。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
        <style>
            html, body{
                margin: 0;
            }

            .container {
                bottom: 0;
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .span50 {
                width: 50%;
            }

            .span100 {
                width: 100%;
            }

            .sheer90 {
                height: 90%;
            }

            .sheer10 {
                height: 10%;
            }

            .span50, .span100,
            .sheer90, .sheer10 {
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="span100 sheer90">
                <div class="span50">
                    <img src="http://placehold.it/1200x1200" width="1200px" height="1200px" alt="" />
                </div>
                <div class="span50"></div>
            </div>
            <div class="span100 sheer10">
                Test
            </div>
        </div>
    </body>
</html>​
于 2012-10-26T18:26:59.577 に答える