在 TD 中将表格居中

Posted 2023-03-05

【中文标题】在 TD 中将表格居中

【英文标题】：Center a Table inside a TD

【发布时间】：2012-12-14 02:19:50

【问题描述】：

我有一个非常简单的问题：我需要在 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">

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

【问题讨论】：

基于表格的布局，nooooooooo！

我知道，但我别无选择:(

几乎总有一个选择，哈哈

@ChrisW。不是 HTML 电子邮件 :(

为什么基于表格的布局不好？我发现它们比在王国来临之前用 css 捏造更简单。

【参考方案1】：

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

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

【讨论】：

这项工作在过时的 css 版本中：D。谢谢，我不想使用边距

【参考方案2】：

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>​

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

【讨论】：

就是这样，但是TD的align属性根本不需要对吧？

是的，你是对的。即使浏览器可能选择通过 legacy/quirks 模式支持它，align 属性不是 HTML5 规范的一部分，您不应该使用它。

【参考方案3】：

您的第二个建议是正确的。 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;

​