Question

我有一个表格，其中包含2个<tr>和2个<td>：

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

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

Live Example

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

例如：其中的表格宽度为32像素，但包含td的宽度为64像素。

如何将表格与右侧对齐？

Answer 1

table是块元素; text-align和align仅适用于内联元素。因此，对于块元素，您必须使用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 。

Answer 2

只考虑以下因素：

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

Answer 3

如果td只包含表而没有其他文本或元素，那么代码下面也应该有效，只有它才能正确对齐td中的所有内容，并且无法在html5中运行：< / p>

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

如何在TD内对齐表格？

3 个答案: