html - 動的テーブルのサイズに合わせて左揃えで隣接するテーブルをセンタリングする

Question

ここに例があります - http://jsfiddle.net/Xb4gV/

私の問題は、右側の3番目のテーブルのサイズが大きくなるため(グリッドビュー)、左側の2つのテーブルを中央に配置したいことです。それらを中心にしたいと思います。これどうやってするの？

Answer 1

何を達成しようとしているのか完全にはわかりませんが、これを試してみてください。あなたが言ったことから外れて、すべてのテーブルを左揃えにしてページの中央に配置したいのですが、3 番目のテーブルをサイズ制限なしで改訂できるようにしたいと考えていますか? もしそうなら、これはうまくいきます：

HTML:

<div class="wrapper">
<div class="center">
<table id="t1">
    <tr>
        <td>
            text
        </td>
    </tr>        
</table>
<table id="t2">
    <tr>
        <td>
            text
        </td>
    </tr>       
</table>
<table id="t3">
    <tr>
        <td>
            text</br>
            text</br>
            text</br>
            Resizable and centered
        </td>
    </tr>       
</table>

CSS:

.wrapper{
clear: left;
float: left;
left: 50%;
margin: 0;
padding: 0;
position: relative;
text-align: left;
 }
.center{
float: left;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#t1{
border: 1px solid black;
float:left;
}

#t2{
border: 1px solid black;
float:left;
}

#t3{
border: 1px solid black;
float:left;
}

表のセルにテキストを追加すると、常にサイズが変更され、中央に配置されます。

Answer 2

こんにちは、このように親divの幅を追加するだけです

#wrapper{
 vertical-align:top;
 margin: 0 auto;
overflow:hidden;
width:200px;
border:solid 10px red;    
}

ライブデモはこちらhttp://jsfiddle.net/Xb4gV/57/