移至表彼此相邻

Question

我有我的第3个表，就像这样：

Table1 
Table2 
Table3 

现在我怎么可以移动表2和表3是下一个与表3低于表2，这样的事情TABLE1 ：

 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> 

Answer 1

这可能帮助ü....

拿三个divs，并把每个div的每个table然后使用float:left

Answer 2

CSS属性可以将它们漂浮在左，右：

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>

或者作为替代方案，有两个“列”格：

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>

Answer 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>

Answer 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>