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

- Dims

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>

- Quentin

Answer 2

简单 -

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

- Eddie C

Answer 3

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

- Tony Dinh

---

一般而言，最好避免使用float来进行对齐。这会对其后的内容产生副作用。 - Quentin

啊！不要使用 align="right"；如果你想采用这种方法，请在样式表中使用 text-align: right。如果你想要一个内联表格，那么请使用 display: inline-table，而不是 display: inline-block。 - Quentin

@Quentin 谢谢，我已经更新了另一种解决方案。 - Tony Dinh

Answer 4

你可以通过以下方式将表格向右浮动

table {
    float: right;
    width: auto;
}

演示

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

- Pattle

---

作为经验法则，最好避免使用 float 进行对齐。它会对其后的内容产生副作用。 - Quentin