CSS：スペースがある場合、隣り合わせにテーブルを表示

私はまだポジションを理解していないので、私はこれに苦労しています。主なアイデアは、私はお互いの隣にテーブルがあり、それが互いに隣り合っていないと、それは他のテーブルの下などになります。 2〜8台のテーブルがあります。CSS：スペースがある場合、隣り合わせにテーブルを表示

私はここにいくつかのコードがあります。ここでは

https://jsfiddle.net/wewk586z

は、事前に

#position1 { 
    position: relative; 
    float: left; 
}

おかげで（もjsfiddleで提供）このテーブルと私のCSSです！

出典

2017-05-22 Scorpion Code

あなたはきれいにしたいですか？ – Ehsan

@ehsanあなたが提供したコードは、私があなたに感謝していたものでした！ –

私はラップ

table { 
 
    \t border: 1px solid #000; 
 
    \t width: 100%; 
 
} 
 
.tab { 
 
    \t float: left; 
 
}

<div class="tab" id="position1"> 
 
<table id="border"> 
 
    <caption>Medewerker 1</caption> 
 
    <tr> 
 
    <th colspan="2">Dag 1</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 2</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 3</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 4</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 5</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
</table> 
 
</div> 
 

 
<div class="tab"> 
 
<table id="border"> 
 
    <caption>Medewerker 2</caption> 
 
    <tr> 
 
    <th colspan="2">Dag 1</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 2</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 3</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 4</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 5</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
</table> 
 
</div> 
 
<div class="tab"> 
 
<table id="border"> 
 
    <caption>Medewerker 3</caption> 
 
    <tr> 
 
    <th colspan="2">Dag 1</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 2</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 3</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 4</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 5</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
</table> 
 
</div> 
 

 

 
<div class="tab"> 
 
<table id="border"> 
 
    <caption>Medewerker 3</caption> 
 
    <tr> 
 
    <th colspan="2">Dag 1</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 2</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    
 
</table> 
 
</div> 
 

 
<div class="tab"> 
 
<table id="border"> 
 
    <caption>Medewerker 4</caption> 
 
    <tr> 
 
    <th colspan="2">Dag 1</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 2</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    
 
</table> 
 
</div> 
 

 
<div class="tab"> 
 
<table id="border"> 
 
    <caption>Medewerker 5</caption> 
 
    <tr> 
 
    <th colspan="2">Dag 1</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="2">Dag 2</th> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
     <td>Opdracht: 12-654 <br> 
 
      Kritische Datum: 22-05-2017</td> 
 
    </tr> 
 
    
 
</table> 
 
</div>

： tabクラスを持つdiv要素内のテーブル

注：より良い結果を得るには、フルページを使用してください。

出典

2017-05-22 11:38:23 Ehsan

あなたは大歓迎です！ – Ehsan

を変更し、次へのあなたのCSS：彼らはもはや適合しないとき

table { 
position: relative; 
float: left; 
}

出典

2017-05-22 11:15:32 Gerard

これは何もしません、それはちょうどお互いの下にそれらを置く –

には、例えば、それらを100％にするために、ブレークポイントを追加し、その後width: 50%を設定してみてくださいと：

#position1 { 
    position: relative; 
    float: left; 
    width: 50%; 
} 

@media screen and max(width: 800px){ 
    #position1{ 
     width: 100%; 
    } 
}

出典

2017-05-22 11:15:50 Daniel

それは私が欲しいものではない、それは他のテーブルの下に行く必要があります –

CSS：スペースがある場合、隣り合わせにテーブルを表示

答えて

関連する問題