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/

如果你希望它们的高度相同，你可以：

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

Answer 2

尝试设置max-width和mid-width。这些会将您的表格限制为您想要的大小。有关详细信息，请参阅链接。

http://www.w3schools.com/css/css_dimension.asp

在多行上并排对齐表格

2 个答案: