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

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/

您可能需要在 fiddle 中使用面板尺寸来说服自己它有效。