cssテーブルの内容を応答可能にするには

私はcssテーブルの内容を反応的にするよう努力しています。申し訳ありませんが、私はこの取引で何か間違いを犯した場合、私はオーバーフローをスタックする新しいです。これは私のHTMLテーブルです：cssテーブルの内容を応答可能にするには

<div class="branduriTable"> 
    <div class="bodyTable"> 
    <div class="randTable"> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Alfa Romeo</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Audi</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">BMW</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Jaguar</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Lancia</a></div> 
    </div> 
    <div class="randTable"> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Mercedes</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Ford</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Renault</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Jeep</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Skoda</a></div> 
    </div> 
    <div class="randTable"> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Ferrari</a></div> 
     <div class="cellTable"> 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src=""></a><a href="" class="denumireBrand">Volkswagen</a></div> 
     <div class="cellTable">&nbsp;</div> 
     <div class="cellTable">&nbsp;</div> 
     <div class="cellTable">&nbsp;</div> 
    </div> 
    </div> 
</div>

そして、これは私のCSSコードです：

.branduriTable { 
    display: table; 
    width: 100%; 
} 

.randTable { 
    display: table-row; 
    margin: 0px 20px; 
} 

.cellTable { 
    border: 1px solid #999999; 
    display: table-cell; 
    padding: 10px 20px 0px 20px; 
} 

.bodyTable { 
    display: table-row-group; 
} 

.brandLogo { 
    display: block; 
    text-align: center; 
    padding: 20px 10px 0 20px; 
    background: none; 
    margin-bottom: 8px; 
} 

.denumireBrand { 
    display: block; 
    text-align: center; 
    color: #0033cc; 
    text-decoration: none; 
    font-size: 15px; 
    margin-bottom: 25px; 
    font-family: "Comic Sans MS", cursive, sans-serif; 
}

私は何をミスしましたか？私はまた、あなたがこのCSSを追加することができ、それが反応するようにするには

Jsfiddle exemple here

出典

2016-12-06 I0sif

この例で何が問題なのか説明していません。テーブルは、ウィンドウのサイズ変更にうまく反応しているように見えます。レスポンシブなメディアクエリを使用する方法を具体的に質問していますか？ –

携帯でこのテーブルを開くと、本当に整えきれないように見えます – I0sif

私のページへのリンクを置くことはできますか？ – I0sif

私は問題がデバイスの画面が512ピクセル以下になると開始されます。

1. First of all you need to add this viewport meta tag just after the `head` tag starts. 
<meta name="viewport" content="width=device-width"> 


2. and then add this media query in your `style.css` file 
@media (max-width:512px){.cellTable { display: block; padding: 5px; }}

が、それはあなたのために働くホープ：

は、だからここに（完全に応答性である）私のソリューションです。

出典

2016-12-17 08:17:53 Rahul

あなたの時間のために、私はこの2つの行のコードを挿入します...私のnoobの質問に申し訳ありません – I0sif

ちょうど私の答えを編集しました。 headタグ内にビューポートメタタグを追加して（頭が始まった直後）、そのメディアクエリをcustom.cssファイルまたはstyle.cssファイルに追加してください。 – Rahul

awow、awesome、ty very much :) – I0sif

コーディングに新たなんだ：

div { 
    transition: .2s ease-out; 
} 

div:hover { 
    box-shadow: 0 3px 10px rgba(0,0,0,.2); 
    transform: translate3d(0,-2px,0); 
}

コードスニペット：

.branduriTable { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.randTable { 
 
    display: table-row; 
 
    margin: 0px 20px; 
 
} 
 

 
.cellTable { 
 
    border: 1px solid #999999; 
 
    display: table-cell; 
 
    padding: 10px 20px 0px 20px; 
 
} 
 

 
.bodyTable { 
 
    display: table-row-group; 
 
} 
 

 
.brandLogo { 
 
    display: block; 
 
    text-align: center; 
 
    padding: 20px 10px 0 20px; 
 
    background: none; 
 
    margin-bottom: 8px; 
 
} 
 

 
.denumireBrand { 
 
    display: block; 
 
    text-align: center; 
 
    color: #0033cc; 
 
    text-decoration: none; 
 
    font-size: 15px; 
 
    margin-bottom: 25px; 
 
    font-family: "Comic Sans MS", cursive, sans-serif; 
 
} 
 
div { 
 
    transition: .2s ease-out; 
 
} 
 

 
div:hover { 
 
    box-shadow: 0 3px 10px rgba(0,0,0,.2); 
 
    transform: translate3d(0,-2px,0); 
 
}

<div class="branduriTable"> 
 
    <div class="bodyTable"> 
 
    <div class="randTable"> 
 
     <div class="cellTable"> 
 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Alfa Romeo</a></div> 
 
     <div class="cellTable"> 
 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Audi</a></div> 
 
     <div class="cellTable"> 
 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">BMW</a></div> 
 
     <div class="cellTable"> 
 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Jaguar</a></div> 
 
     <div class="cellTable"> 
 
     <a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Lancia</a></div> 
 
    </div> 
 
    <div class="randTable"> 
 
     <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Mercedes</a></div> 
 
     <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Ford</a></div> 
 
     <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Renault</a></div> 
 
     <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Jeep</a></div> 
 
     <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Skoda</a></div> 
 
    </div> 
 
    <div class="randTable"> 
 
     <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Ferrari</a></div> 
 
     <div class="cellTable"><a href="" class="brandLogo" hidefocus="true" style="outline: none;"><img src="" alt=""></a><a href="" class="denumireBrand" hidefocus="true" style="outline: none;">Volkswagen</a></div> 
 
     <div class="cellTable">&nbsp;</div> 
 
     <div class="cellTable">&nbsp;</div> 
 
     <div class="cellTable">&nbsp;</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- DivTable.com -->

出典

2016-12-06 21:51:17

クールだが動作していない – I0sif

コードスニペットで正常に機能するため、もう一度コードを見てください。 @ I0sif –

コードスニペットが@ I0sif –

cssテーブルの内容を応答可能にするには

答えて

関連する問題