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

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中的左列包裹到floated left，宽度为50％或其他合适的数字，然后换行右列在div floated到right，宽度为50％或其他合适的数字。

遗憾的是，保留语义的替代方法依赖于绝对定位（不适用于动态表）或JavaScript。 jQuery Masonry是一种合理的方式来对齐列的内容，以便它们很好地融合在一起，但遗憾的是，如果没有启用JavaScript，用户将无法使用。

Answer 4

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