如何在 TD 中对齐表格？答案

【问题标题】：How to align a table within a TD?如何在 TD 中对齐表格？
【发布时间】：2012-11-02 00:39:34
【问题描述】：

我有一个 table，其中有 2 个 <tr> 和 2 个 <td>：

<table>
    <tr>
        <td>
            <table>
                <!-- other content -->
            </table>
        </td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>

***** 在哪里，我需要插入几乎相同的表（不包含另一个表）。但是当我调试它时，表格是左对齐的。

Live Example

我希望左上框中的表格右对齐（知识：和居中对齐）。

例如：里面的表格是 32px 宽度，但包含 td 是 64px 宽度。

如何将表格向右对齐？

【问题讨论】：

他想知道对齐表格，而不是表格内的东西

标签： html css html-table alignment

【解决方案1】：

只想到以下几点：

<table>
    <tr>
        <td style="text-align: right"></td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>

或另一种 css 方法：

table table {
    float: right;
}

或内联浮点数：

<table>
    <tr>
        <td>
            <table style="float: right;">.....</table>
        </td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>

【讨论】：

float 有什么问题？应该在任何地方工作 - 这就是你所追求的：jsbin.com/evemoy/1/edit?
@damien : table 是一个 blcok 元素而不是像文本或图片这样的内联元素。实际上blockelements只能放置和对齐margin属性。

【解决方案2】：

如果td 只包含表格而没有其他文本或元素，那么下面的代码也应该可以工作，只有它可以正确对齐td 中的所有内容，并且在 html5 中不起作用：

<table>
    <tr>
        <td align="right">*</td>
        <td/>
    </tr>
    <tr>
        <td/><td/>
    </tr>
</table>

【讨论】：

【解决方案3】：

table 是一个块元素； text-align 和 align 仅适用于 inline-elements。所以对于 block-element 你必须使用margin:

CSS：

.centered{
    margin: 0 auto;
}

.rightaligned{
    margin-right: 0;
    margin-left: auto;
}

.leftaligned{
    margin-left: 0;
    margin-right: auto;
}

HTML：

<td>
    <table class="leftaligned">
        <!-- Other Content -->
    </table>
    <table class="centered">
        <!-- Other Content -->
    </table>
    <table class="rightaligned">
        <!-- Other Content -->
    </table>
</td>

这几乎适用于所有浏览器，甚至 Internet Explorer 7。

【讨论】：

是的，text-align 仅适用于内联元素，但 td align 属性也适用于块元素。
Visual Studio 说：“元素 'align' 已过时或不标准。