将一个表放在TD内

Question

我有一个非常简单的问题：我需要将一个表集中在一个TD元素中。如果我使用HTML 4，我会这样做：

​<table style="border:solid;width: 100%">
    <tr>
        <td align="center">
            <table style="border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

但我试图不使用弃用的属性并以CSS方式执行。我已经尝试过了：

<td style="text-align:center">

而且：

<td style="margin: 0 auto">

表格保留在单元格的左侧。有什么建议吗？

Answer 1

你对margin:auto 0;有正确的想法，只需要取消0.

工作示例：http://jsfiddle.net/cxnR8/

<table style="border:solid;width: 100%">
    <tr>
        <td>
            <table style="margin:auto;border:solid; width:50%">
                <tr>
                    <td >I must be in the center</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

但是，更重要的是，你真的需要使用表格和内嵌样式吗？

Answer 2

你的第二个建议是正确的。 See this working example

HTML：

<table class="outer">
    <tr>
        <td>
            <table class="inner">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​

CSS：

.outer
{
    width: 100%;
    border: solid 1px red;
}
.inner
{
    width: 25%;
    margin: auto;
    border: solid 1px blue;
}
​

Answer 3

使用已弃用的align=""属性使表居中。

<table>
    <tr>
        <td>
            <table align="center">
                <tr>
                    <td>in the middle</td>                    
                </tr>
            </table> 
        </td>                    
    </tr>
</table>​