如何讓這些表格堆疊在一起？

Question

如何讓這些桌子在沒有額外空間的情況下相互滑動？

<table border="0"> 
    <tbody> 
     <tr> 
      <th>And another</th> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
    </tbody> 
</table> 

<table border="0"> 
    <tbody> 
     <tr> 
      <th>And another</th> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
    </tbody> 
</table> 

<table border="0"> 
    <tbody> 
     <tr> 
      <th>And another</th> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
    </tbody> 
</table> 

<table border="0"> 
    <tbody> 
     <tr> 
      <th>And another</th> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
     <tr> 
      <td>Some stuff in the table. </td> 
     </tr> 
    </tbody> 
</table> 

CSS

/* ---------------[ Tables ]--------------- */ 

table { 
    float: left; 
    width: 285px; 
    } 

tr, td, th { 
    margin:auto; 
    } 

td, th { 
    padding:5px; 
    vertical-align:top; 
    } 

th { 
    font-weight:bold; 
    background:#ddd; 
    } 

td { 
    border:1px solid #ddd; 
    } 

感謝

Answer 1

你可以嘗試將clear: left添加到您的表格中：

table { 
    float: left; 
    clear: left; 
    width: 285px; 
} 

演示：http://jsfiddle.net/ambiguous/AsUSj/

您可能需要用小提琴來說服自己，它的工作原理的面板尺寸的發揮。

Answer 2

要麼設置寬度爲100％的表或把寬度他們的父元素與寬度285px

Answer 3

不幸的是，在這種情況下純floating不會做你想要的。最簡單的修復方法是非語義化：將div的div即floated至left（寬度爲50％或其他適當的數字）包裝在左列中，並將div的的右列包裝爲right，寬度爲寬度50％或其他合適的號碼。

保留語義的替代方案不幸依賴於絕對定位（不適用於動態表）或JavaScript。 jQuery Masonry是對齊各種東西的合理方式，因此它可以很好地融合在一起，但不幸的是，對於未啓用JavaScript的用戶不適用。

Answer 4

table { 
    display: block; 
    width: 285px; 
}