将表格彼此相邻移动答案

【问题标题】：Move tables next to each other将表格彼此相邻移动
【发布时间】：2016-10-10 20:59:00
【问题描述】：

我的页面中有 3 个表格，如下所示：

Table1
Table2
Table3

现在如何将表 2 和 3 移动到 table1 旁边，而 table3 在 table2 下面，如下所示：

       Table2
Table1 Table3

表格的 HTML：

    <table id="table-1">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>

    <table id="table-2">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>

<table id="table-3">
       <tbody>
         <tr class="row-1">
           <td class="column-1">something</td><td class="column-2">something</td>
         </tr>
         <tr class="row-2">
           <td class="column-1">something</td><td class="column-2">something</td>
        </tr>

【问题讨论】：

标签： html css html-table

【解决方案1】：

你可以让它们左右浮动：

td {
  border: 1px solid black;
}
#table-1 { 
  border: 2px solid red;
  float: left;
}
#table-2 { 
  border: 2px solid blue;
  float: right;
}
#table-3 { 
  border: 2px solid yellow;
  float: right;
  clear: left;
}

<table id="table-1">
  <tbody>
    <tr class="row-1">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
    <tr class="row-2">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
  </tbody>
</table>

<table id="table-2">
  <tbody>
    <tr class="row-1">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
    <tr class="row-2">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
  </tbody>
</table>

<table id="table-3">
  <tbody>
    <tr class="row-1">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
    <tr class="row-2">
      <td class="column-1">something</td><td class="column-2">something</td>
    </tr>
  </tbody>
</table>

或者作为替代方案，使用两个“列”div：

td {
  border: 1px solid black;
}
#table-1 { border: 2px solid red; }
#table-2 { border: 2px solid blue; }
#table-3 { border: 2px solid yellow; }

#col1, #col2 {
  float: left;
}

<div id="col1">
  <table id="table-1">
    <tbody>
      <tr class="row-1">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
      <tr class="row-2">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
    </tbody>
  </table>
</div>

<div id="col2">
  <table id="table-2">
    <tbody>
      <tr class="row-1">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
      <tr class="row-2">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
    </tbody>
  </table>

  <table id="table-3">
    <tbody>
      <tr class="row-1">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
      <tr class="row-2">
        <td class="column-1">something</td><td class="column-2">something</td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：

【解决方案2】：

这可能对你有帮助....

取三个divs并将每个table放在每个div中，然后使用float:left的css属性

【讨论】：

【解决方案3】：

#table-1{float:left;}

<table id="table-1">
<tbody>
<tr class="row-1">
    <td class="column-1">something1</td><td class="column-2">something1</td>
</tr>
<tr class="row-2">
    <td class="column-1">something1</td><td class="column-2">something1</td>
</tr>
<tbody>
</table>
<table id="table-2">
<tbody>
<tr class="row-1">
    <td class="column-1">something2</td><td class="column-2">something2</td>
</tr>
<tr class="row-2">
    <td class="column-1">something2</td><td class="column-2">something2</td>
</tr>

<table id="table-3">
<tbody>
<tr class="row-1">
    <td class="column-1">something3</td><td class="column-2">something3</td>
</tr>
<tr class="row-2">
    <td class="column-1">something3</td><td class="column-2">something3</td>
</tr>
  <tbody>
</table>
  <tbody>
</table>

【讨论】：

【解决方案4】：

你可以试试这个吗？

<div style="float:left">
     <table id="table-1">
         <tr><td>Table11</td><td>Table12</td></tr>
         <tr><td>Table13</td><td>Table14</td></tr>
     </table>
</div>

<div style="float:right">
     <table id="table-2">
         <tr><td>Table21</td><td>Table22</td></tr>
         <tr><td>Table23</td><td>Table24</td></tr>
     </table>

     <table id="table-3">
         <tr><td>Table31</td><td>Table32</td></tr>
         <tr><td>Table33</td><td>Table34</td></tr>
     </table>
  </div>

【讨论】：