it-swarm.com.ru

Как выровнять всю таблицу вправо с помощью CSS?

Как выровнять всю таблицу вправо с помощью CSS?

margin-right не помогает

Здесь: http://jsfiddle.net/dimskraft/Y2FKy/

HTML:

<table class="block logo">
    <colgroup>
        <col style="width:50%"/>
        <col style="width:50%"/>
    </colgroup>
    <tr>
        <td>something</td>
        <td>
            <table class="menu">
                <tr>
                    <td>Item 1</td>
                    <td>Item 2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS:

table {
    width: 100%;
}
table.menu {
    width: auto;
    margin-right: 0px;
}
13
Dims

Вам также нужно установить левое поле на auto. Это сделает левое поле Толкать стол вправо настолько, насколько это позволяет правое поле.

table {
    width: 100%;
}
table, td {
    border: solid black 1px;
}
table.menu {
    width: auto;
    margin-right: 0px;
    margin-left: auto;
}
<table class="block logo">
    <colgroup>
        <col style="width:50%"/>
        <col style="width:50%"/>
    </colgroup>
    <tr>
        <td>something</td>
        <td>
            <table class="menu">
                <tr>
                    <td>Item 1</td>
                    <td>Item 2</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

29
Quentin

Легко -

table { 
    width: 60%; /* whichever width you want */
    margin-left: 40%; /* minus the amount to make it 100% */
}
3
Eddie C

Вместо этого используйте float: right:

table.menu {
    width: auto;
    float: right;
}

JSFiddle

Решение 2:

Поскольку float не является хорошей практикой для выравнивания элементов, вы можете использовать <td style="text-align: right"> и display: inline-table в таблице:

    <td style="text-align: right">
        <table border="1" class="menu">
            <tr>
                <td>Item 1</td>
                <td>Item 2</td>
            </tr>
        </table>
    </td>


    table.menu {
        width: auto;
        display: inline-table;
    }

Решение JSFiddle 2

3
TrungDQ

Вы можете перемещать свой стол вправо, выполнив

table {
    float: right;
    width: auto;
}

Демо

Но обратите внимание, что вам нужно очистить поплавок для контента, который идет после него

0
Pattle