1. 首页
  2. 问答
  3. CSS：如果有空间显示表格彼此相邻

CSS：如果有空间显示表格彼此相邻

2017-05-22 41 views
1

我不明白位置，所以我正在努力与此。 其主要思想是，我有彼此相邻的表格，当它们不适合彼此相邻时，它会在另一个表格下面等等。 它将会在2到8桌左右。CSS：如果有空间显示表格彼此相邻

我这里有一些代码：

https://jsfiddle.net/wewk586z

这是我与此表（在的jsfiddle还提供）

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

提前感谢CSS！

来源

2017-05-22 Scorpion Code

+0

你想要很好吗？ – Ehsan

+0

@ehsan您提供的代码是我一直在寻找的谢谢！ –

回答

1

我包表中的div有tab类：

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>

注意：使用整页可获得更好的结果。

来源

2017-05-22 11:38:23 Ehsan

+0

欢迎您！ – Ehsan

0

更改您的CSS为以下：

table { 
position: relative; 
float: left; 
}

来源

2017-05-22 11:15:32 Gerard

+0

这不会做任何事情，它只是把它们放在彼此之下 –

1

尝试设置width: 50%，然后添加断点，使其100％的时候，他们不适合了，例如：

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

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

来源

2017-05-22 11:15:50 Daniel

+0

这不完全是我想要的，它需要在其他表下 –

相关问题

 相关问题