web-dev-qa-db-fra.com

Comment aligner tout le tableau à droite avec CSS?

Comment aligner tout le tableau à droite avec CSS?

margin-right n'aide pas

Ici: 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;
}
htmlcsshtml-table
13
Dims

Vous devez également définir la marge gauche sur auto. Cela fera la marge de gauche Poussez la table aussi à droite que le permet la marge de droite.

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

Facile -

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

Utilisez float: right à la place:

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

JSFiddle

Solution 2:

Comme float n'est pas une bonne pratique pour aligner des éléments, vous pouvez utiliser <td style="text-align: right"> et display: inline-table dans le tableau:

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

Solution JSFiddle 2

3
TrungDQ

Vous pouvez faire flotter votre table à droite en faisant

table {
    float: right;
    width: auto;
}

Démo

Mais veuillez noter que vous devrez effacer le flottant pour le contenu qui le suit

0
Pattle