如何让这些表格堆叠在一起？

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; 
}