css - 在多行上并排对齐表格

Question

我正在尝试并排对齐 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>gf@abc.com</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>user@gmail.com</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>
​

Answer 1

这是正确布置的表格:

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

如果您希望它们的高度相同，您可以:

1. 让所有的 table 高度相同
2. 使包含表格的 div 高度相同
3. 有一个每行包含两个表格的 div