移至表彼此相鄰

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>