如何使用CSS将整个表格对齐？

Question

如何使用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;
}

Answer 1

您还需要将左边距设置为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>

Answer 2

改为使用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 solution 2

Answer 3

简单 -

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

Answer 4

您可以通过

将表格向右浮动

table {
    float: right;
    width: auto;
}

Demo

但请注意您需要清除其后的内容的浮动