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

【问题标题】：CSS: displaying tables next to each other if there is spaceCSS：如果有空间，则彼此相邻显示表格
【发布时间】：2017-10-22 00:37:04
【问题描述】：

我还不了解这些职位，所以我正在为此苦苦挣扎。主要思想是，我的桌子彼此相邻，当它不适合彼此相邻时，它会放在另一张桌子下方，依此类推。大概有 2 到 8 张桌子。

我这里有一些代码：

https://jsfiddle.net/wewk586z

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

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

提前致谢！

【问题讨论】：

你想要exatly吗？
@ehsan 您提供的代码正是我想要的，谢谢！

标签： html css

【解决方案1】：

我将表格包装在具有tab 类的 div 中：

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】：

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

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

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

【讨论】：

这不是我想要的，它需要放在另一张桌子下面

【解决方案3】：

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

table {
 position: relative;
 float: left;
}

【讨论】：

这没有任何作用，它只是将它们放在彼此下方