在多行上並排對齊表

我想對齊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>

來源

2012-07-31 dotNetNewbie