How to align entire table to right with CSS?

Question

How to align entire table to right with CSS?

margin-right does not help

Here: 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;
}

Answer 1

Use float: right instead:

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

JSFiddle

Solution 2:

As float is a not a good practice to align elements, you can use <td style="text-align: right"> and display: inline-table in the 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 solution 2

Answer 2

You need to set the left margin to auto too. That will make the left margin push the table as far right as is allowed by the right margin.

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>