如何在 TD 中对齐表格？

Posted 2023-03-05

【中文标题】如何在 TD 中对齐表格？

【英文标题】：How to align a table within a 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 宽度。

如何将表格向右对齐？

【问题讨论】：

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

【参考方案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' 已过时或不标准。