2

ハードコーディングされたピクセル値ではなく、% を持つレスポンシブ テーブルを取得しようとしていますが、ウィンドウのサイズを変更すると、画像を配置する列が非常に小さくなります。

HTML:

<TABLE BORDER=1 style="width: 90%; margin: 5%;">
    <TR>
        <TD width="70%">
            <h4>ABOUT US</h4>
            <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
            </p>
            <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
            <br/><br/><br/><br/><br/>
        </TD>
        <TD width="30%" rowspan=2><img src="images/foto.jpeg"></TD>
    </TR>
    <TR>
        <TD>
            <h4>MEET THE TEAM</h4>
            <p>content</p>
        </TD>
</TABLE>

jsフィドル

column 2になるようにテーブルのサイズを変更する方法はありrow 3ますか? div を使用して同じことをしなければならない場合は、それで問題ありません。

4

4 に答える 4

13

レスポンシブ Web デザイン (または Web デザイン全般) に関する簡単なルールを次に示します。

一度もない

これまで

これまで

... 表を使用してページのレイアウトを定義します。表は、ページのレイアウトを定義するのではなく、表形式のデータを表示するように設計されています。div代わりに要素を使用する

覚えておくと便利なリンクはhttp://shouldiusetablesforlayout.com/です。

于 2013-04-27T17:26:01.017 に答える
6

テーブルはレイアウトに使用しないでください（@davblaynが指摘したように）が、使用したい/必要な場合：

HTML:

<TABLE BORDER=1 style="width: 90%; margin: 5%;">
    <TR>
        <TD id='firstItem' width="70%">
            <h4>ABOUT US</h4>
            <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
            </p>
            <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
            <br/><br/><br/><br/><br/>
        </TD>
        <TD width="30%" id='responsiveItem' rowspan=2><img src="images/foto.jpeg"></TD>
    </TR>
    <TR>
        <TD>
            <h4>MEET THE TEAM</h4>
            <p>content</p>
        </TD>
</TABLE>

CSS:

@media all and (max-width: 699px) and (min-width: 520px) {
    td{
        width:100%;
    }
    #firstItem{
        display:block;
    }
    #responsiveItem{
        float:left;
    }
}

jsフィドル

JSFiddle ウィンドウのサイズを変更してみてください。十分なスペースがない場合はcolumn、画像がドロップダウンして になります。row

于 2013-04-27T17:23:55.993 に答える
2

レイアウトにテーブルを使用しないでください。とにかく、複数の要素の表示プロパティをオーバーライドする必要があるため、CSS でやりたいことを簡単に行うことはできません。

于 2013-04-27T17:13:58.267 に答える
0

「レスポンシブ」とは、テキストが収まらない場合でもおかしくならず、画像サイズを維持することを意味する場合 (画像は適切にスケーリングされません)、これを使用できます。

    <table border="1" width="800px" height="250" style="min-width:800px; width: 90%; margin: 5%;">
      <tr> 
        <td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
        </td>
        <td style="height: 250px; width: 250px;" rowspan="2">CONTENT</td>
      </tr>
      <tr> 
        <td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
        </td>
      </tr>
    </table>

基本的に、コンテンツを収容するための最小スペースを設定する必要があります。その後、必要なだけ外側に拡大できます。

はい、テーブルは一般的に嫌われていますが、それは「なぜそれをしたいのか」の別の形であり、質問は特にテーブルを求めているため、ペットの怒りを満たすために質問を完全に変更する必要はありません.

テーブルは Web サイトでは問題なく機能しますが、主な問題は、セットアップに時間がかかることです。一度セットアップすると、いつまでもそのままであり、テーブルを完全に再作成しないと変更できません。

これは、ここでの主な問題には見えません。

于 2013-04-27T17:59:30.987 に答える