html - 如何使这些 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>
    </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;
    }

谢谢

最佳答案

您可以尝试将clear: left添加到表中：

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

演示：http://jsfiddle.net/ambiguous/AsUSj/
你可能需要玩弄小提琴上的面板大小，以使自己相信它是有效的。

关于html - 如何使这些 table 彼此叠放？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7774826/