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

How to align entire table to right with CSS?

提问by Dims

How to align entire table to right with CSS?

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

margin-rightdoes not help

margin-right没有帮助

Here: http://jsfiddle.net/dimskraft/Y2FKy/

在这里：http: //jsfiddle.net/dimskraft/Y2FKy/

HTML:

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:

CSS：

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

回答by Quentin

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

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

回答by Eddie C

Easy -

简单 -

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

回答by TrungDQ

Use float: rightinstead:

使用float: right来代替：

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

JSFiddle

JSFiddle

Solution 2:

解决方案2：

As floatis a not a good practice to align elements, you can use <td style="text-align: right">and display: inline-tablein the table:

由于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

JSFiddle 解决方案 2

回答by Pattle

You can float your table to the right by doing

您可以通过执行以下操作将您的桌子浮动到右侧

table {
    float: right;
    width: auto;
}

Demo

演示

But please notethat you will need to clear the float for content that comes after it

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