css - 在多行上并排对齐表

我正在尝试并排对齐10个表，即5行2列。
每个表中的行都彼此不同。我使用了float：left并为每个div定义了一个宽度，但是它仍然无法正常工作。

这是一些示例代码和fiddle

<div style="width:500px;">

    <div style="float:left; width:250px">
        <h4>Details </h4>
        <table border="1px">
        <tbody >
                <tr>
                    <td>Id</td>
                    <td>1234-4524-4591-2545</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>Test</td>
                </tr>
                <tr>
                    <td>Status</td>
                    <td>OK</td>
                </tr>
                <tr>
                    <td>Step</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>Date</td>
                    <td>xxx</td>
                </tr>
                <tr>
                    <td>Time</td>
                    <td>ysa</td>
                </tr>
        </tbody>
        </table>
    </div>

<div style="float:left; width:250px">
<div>
    <h4>Options</h4>
</div>
<table border="1px">
    <tbody>
            <tr>
                <td>Option 1</td>
                <td>OK</td>
            </tr>
            <tr>
                <td>Option 2</td>
                <td>OK</td>
            </tr>
            <tr>
                <td>Option 3</td>
                <td>OK</td>
            </tr>
            <tr>
                <td>Option 4</td>
                <td>OK</td>
            </tr>
    </tbody>
</table>
</div>

<div style="float:left; width:250px">
<div>
    <h4>Schedule</h4>
</div>
<table border="1px">
    <tbody >
            <tr>
                <td>Time</td>
                <td>11/12/12 6:30 AM</td>
            </tr>
            <tr>
                <td>Email ID:</td>
                <td>[email protected]</td>
            </tr>
    </tbody>
</table>
</div>

<div style="float:left; width:250px">
<div>
    <h4>Body</h4>
</div>
<table border="1px">
    <tbody>

            <tr>
                <td>Subject Line</td>
                <td>test</td>
            </tr>
            <tr>
                <td>From Address</td>
                <td>[email protected]</td>
            </tr>
             <tr>
                <td>From Name</td>
                <td>Some Name</td>
            </tr>
    </tbody>
</table>
</div>

<div style="float:left; width:250px">
<div>
    <h4>User Settings</h4>
</div>
<table border="1px">
    <tbody>
            <tr>
                <td>Setting 1</td>
                <td>false</td>
            </tr>
            <tr>
                <td>Setting 2</td>
                <td></td>
            </tr>
    </tbody>
</table>
</div>
</div>
​

最佳答案

这是正确布置的表：

http://jsfiddle.net/GfJTd/23/

如果希望它们的高度相等，则可以：


使桌子高度相同
使包含表格的div高度相同
有一个div，每行包含两个表

关于css - 在多行上并排对齐表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11731443/