1

私の質問は簡単です。

まず、次のコードを見てください。

http://jsfiddle.net/Jk8Nr/

私が持っているのは、いくつかのパディング、ボーダー、テキストの配置を備えた非常に単純なテーブルだけです。

上記の jsFiddle にアクセスすると、結果ウィンドウの幅を広げることができ、すべてのテーブル項目が快適に表示されます。ただし、上記のウィンドウの幅を狭くすると、横スクロールが不要になるように、表のセルが 2 行目を順番に移動するようにします。

<ul><li>テーブルの代わりにこれを使用してもかまいませんが、これを実行できるようにしたいと考えています。

どなたか解決策に詳しい方、教えてください。jQuery/JS/CSS の使用は気にしませんが、それ以外のことはあまりよく知りません。

アップデート

動作するソリューションを備えた更新された jsFiddle は次のとおりです。

http://jsfiddle.net/Jk8Nr/3/

4

4 に答える 4

2

追加

border-collapse: separate;

あなたのTABLEスタイルに

と

display: inline-block;

あなたのTD/THスタイルに...

乾杯。

于 2012-08-27T19:37:44.883 に答える
1

これには、適切と思われる順序付きまたは順序なしのリストを使用することを強くお勧めします。セマンティクスのためだけの場合 (ナビゲーション メニューは移動したいページのリストです)、tableはデータを表形式で表示する必要があります。そうは言っても、私は提案します：

<header>
    <ul>
        <li>Home</li>
        <li>Gallery</li>
        <li>Location</li>
        <li>Rates</li>
        <li>Contact</li>
    </ul>
</header>​

CSS の場合:

header ul {
    width: 100%;
    font-size: 0; /* to remove the white-space gaps between the li elements */
    text-align: center; /* to center the list, amend as appropriate */
}

header ul li {
    font-size: 16px; /* to explicitly reset the font-size and
                        override that of the parent */
    display: inline-block; /* to allow for wrapping */
    width: 19%; /* a baseline width, if the monitor is wide enough to allow it */
    min-width: 7em; /* a minimum width, if the 19% of the width of the ul is less than
                       7em, the li elements will wrap to the next line, rather than
                       becoming too small to be functional */
    border: 1px solid #000;
    -webkit-box-sizing: border-box; /* To explicitly include the border in the width
                                       of the element */
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

JS フィドルのデモ。

于 2012-08-27T19:45:25.893 に答える
0

表の代わりにリストを使用することを提案している他のポスターに同意します。次に、メディアクエリを使用して、レイアウトをそのレベルで制御したい場合は、特定のデバイス幅で強制的にラップすることができます。600pxにブレークポイントを設定する例を次に示します（マークアップしてからcss）

<header>
    <ul>
        <li>Home</li>
        <li>Gallery</li>
        <li>Location</li>
        <li>Rates</li>
        <li>Contact</li>
    </ul>
</header>​

ul {
    width:100%;
}
li {
    width:118px;
    float:left;
    clear:left;
    padding:5px 0;
    border: 1px solid #000; 
    border-bottom:none; 
    text-align:center;            
}
li:last-child {
    border-bottom:1px solid #000;
}

@media (min-width:600px) {
    li {
        clear:none;
        border-bottom:1px solid #000;        
        border-right:none;
    }
    li:last-child {
        border-right: 1px solid #000;
    }
}

http://jsfiddle.net/Jk8Nr/8/ </ p>

于 2012-08-27T19:57:18.347 に答える
0

次のようなセマンティックマークアップを使用してください。

<header>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Location</a></li>
            <li><a href="#">Rates</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
</header>

次に、cssメディアクエリを使用して、小さい画面用にページのスタイルを設定します。

header ul {
    width: 100%;
    font-size: 0;
    text-align: center;
}

header ul li {
    font-size: 16px;
    display: inline-block;
    width: 19%;
    min-width: 7em;
    border: 1px solid #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
@media all and (max-width: 564px) and (min-width: 100px){
    header ul li {
        width:100%;
        display:block;
    }
}

これがフィドルですhttp://jsfiddle.net/Jk8Nr/6/

于 2012-08-27T19:44:38.810 に答える