html - 将相邻的表格居中并左对齐到动态表格的大小

Question

这是一个例子 - http://jsfiddle.net/Xb4gV/

我的问题是我想让左边的 2 个表居中，因为右边的第 3 个表会增加大小( GridView )。我希望他们居中。我该怎么做？

Answer 1

不完全确定您要完成什么，但您可以尝试一下。与您所说的不同，您希望所有表格都左对齐并在页面中间居中，但您希望第三个表格能够在没有大小限制的情况下进行修改，对吗？如果是这样，这将起作用:

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;
}

您可以将文本添加到任何表格单元格，它会始终调整大小并自行居中。