Как выровнять таблицу внутри TD?

У меня есть таблица с 2 <tr> и 2 <td>:

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

Где ***** мне нужно вставить почти ту же таблицу (в которой не содержится другая таблица). но когда я его отлаживаю, таблица выравнивается влево.

Живой пример

Я хочу, чтобы таблица в верхнем левом поле выравнивалась по правому краю (для получения информации: и выравнивание по центру).

Например: Таблица внутри - 32px ширина, но содержащая td ширина 64px.

Как я могу выровнять строку справа?

Ответ 1

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

Ответ 2

На ум приходит только следующее:

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

Или другой подход css:

table table {
    float: right;
}

или inline с поплавком:

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

Ответ 3

В случае, если td содержит только таблицу, а другой текст или элемент, то ниже код также должен работать, только он правильно выравнивает все в td и не будет работать в html5:

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