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

How do I get these tables to slide under each other without the extra space?

如何在没有额外空间的情况下让这些桌子相互滑动?

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

Thanks

4 个解决方案

#1

You could try adding clear: left to your tables:

你可以尝试添加clear:left到你的表:

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

Demo: http://jsfiddle.net/ambiguous/AsUSj/

You might need to play with the panel sizes in the fiddle to convince yourself that it works.

您可能需要使用小提琴中的面板大小来说服自己它的工作原理。

#2

either set width to 100% on tables or put a width on their parent element with width 285px

要么将宽度设置为100%,要么将宽度放在其父元素上,宽度为285px

#3

Unfortunately, pure floating wont do what you want it to in this case. The simplest fix is non-semantic: Wrap the left column in a div that's floated to the left, with a width of 50% or some other suitable number, and wrap the right column in a div that's floated to the right, with a width of 50% or some other suitable number.

不幸的是,在这种情况下,纯浮动不会做你想要的。最简单的修复是非语义的:将左列包裹在一个浮动到左边的div中,宽度为50%或其他合适的数字,并将右列包裹在一个向右浮动的div中,宽度为50%或其他合适的数字。

The alternative to preserve semantics unfortunately relies on either absolute positioning (which wont work for dynamic tables) or JavaScript. jQuery Masonry is a reasonable way of aligning columns of stuff so that it all fits together nicely, but unfortunately will not work for users without JavaScript enabled.

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

#4

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