div内にテーブルを収める方法

私は多くの答えを読んだが、私がやりたいことをする方法を見つけていない。div内にテーブルを収める方法

G1はG2

のG3、G4、私は窓を減らす場合

そして、それが反応する必要があります：

は、私はこのような4つのグラフを表示したいですg1

G2

G3

G4

私のテーブルのHTMLがあります：

   <table class="tableChart"> 
       <tr> 
        <td>{{> chart chart_id=this.idChartMem}}</td> 
        <td>{{> chart chart_id=this.idChartCPU}}</td> 
       </tr> 
       <tr> 
        <td>{{> chart chart_id=this.idChartNet}}</td> 
        <td>{{> chart chart_id=this.idChartDisk}}</td> 
       </tr> 
       </table>

そして、私はそれを作る方法を見つけることができないので、何のCSSはありません。私はdisplay: inline-block;をテストしているが、それは

[EDIT]は、結果はそのための簡単なのdivのを使用し、代わりにテーブルの

出典

2017-01-24 Jerome

ブートストラップでこれは簡単です。 –

ブートストラップがインストールされているので、アイデアはありますか？ – Jerome

レイアウトのためにテーブルを使用すべきではありません。 –

ある答えを追っ何も変わっていません。 display: table-*を使用し、ビューポートが小さすぎる場合はdisplay: table-cellをdisplay: block;に変更してください。

ビューポートサイズを確認するには、@mediaメディアクエリを使用します。

あなた<head>タグの追加：

<meta name='viewport' content='width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no, initial-scale=1' />

その後、あなたのCSSファイルの追加には、画面幅をchanaging処理するために、メディアクエリを追加する必要があり

.table { 
 
    display: table; 
 
} 
 
.table .row { 
 
    display: table-row; 
 
} 
 
.table .td { 
 
    display: table-cell; 
 
    padding: 20px; 
 
    border: 1px solid #ddd; 
 
} 
 

 
/** not needed if using media queries from below. Only for demo **/ 
 
.table.narrow .td { 
 
    display: block; 
 
} 
 

 
/***** 
 

 
@media (max-width: 500px) { 
 
    .table .td { 
 
     display: block; 
 
    } 
 
} 
 

 
******/

Wide view: 
 
<br/> 
 
<div class="table"> 
 
    <div class="row"> 
 
    <div class="td td1">1</div> 
 
    <div class="td td2">2</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="td td3">3</div> 
 
    <div class="td td4">4</div> 
 
    </div> 
 
</div> 
 

 
<hr/>Narrow view: 
 
<br/> 
 
<div class="table narrow"> 
 
    <div class="row"> 
 
    <div class="td td1">1</div> 
 
    <div class="td td2">2</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="td td3">3</div> 
 
    <div class="td td4">4</div> 
 
    </div> 
 
</div>

出典

2017-01-24 13:58:52 Justinas

それは素晴らしですが、私は実際にあなたが例を持っている 'use @ media'の部分で失われていますか？（ええ、自分でもチェックできます） – Jerome

@Jeromeメディアクエリを使用して実装する方法については、CSSのコメントセクションをチェックしてください。 – Justinas

編集をお願いします – Jerome

：

@media only screen and (min-device-width: 240px) and (max-device-width:  
768px) { 

    .tableChart td { 

     display: block; 

    } 

}

お客様のニーズに合わせて最大デバイス幅を変更することができます。&

出典

2017-01-24 14:05:02

div内にテーブルを収める方法

答えて

関連する問題