0

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

这是一些示例代码和小提琴

<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>
​
4

2 回答 2

1

这是正确布置的表格：

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

如果您希望它们具有相同的高度，您可以：

  1. 使桌子高度相同
  2. 使包含表格的 div 高度相同
  3. 有一个每行包含两个表的 div
于 2012-07-31T04:58:00.157 回答
0

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

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

于 2012-07-31T00:15:43.420 回答