CSS：如果有空格，则显示彼此相邻的表格

时间：2017-05-22 11:12:38

标签： html css

我还不明白这个位置，所以我正在努力解决这个问题。 主要的想法是，我有彼此相邻的表格，当它彼此不相邻时，它会在另一个表格之下，依此类推。 它将在2到8个桌子左右。

我在这里有一些代码：

https://jsfiddle.net/wewk586z

这是我用这个表的CSS（也在jsfiddle中提供）

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

提前致谢！

3 个答案:

答案 0 :(得分：1)

尝试设置width: 50%然后添加断点，以便在它们不再适合时将其设为100％，例如：

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

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

答案 1 :(得分：1)

我在div中包含tab类：

的表 

table {
 	border: 1px solid #000;
 	width: 100%;
 }
 .tab {
 	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>

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

答案 2 :(得分：0)

将您的CSS更改为以下内容：

table {
 position: relative;
 float: left;
}
相关问题
最新问题