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. 行ごとに2つのテーブルを含む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 に答える