Come allineare tutta la tabella a destra con i CSS?

Come allineare tutta la tabella a destra con i CSS?

margin-right non aiuta

Qui: 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;
}
InformationsquelleAutor Dims | 2014-03-09

 

4 Replies
  1. 30

    È necessario impostare il margine sinistro e auto troppo. Che farà il margine sinistro e spingere la tabella come estrema destra è consentito dal margine destro.

    CSS:

    table {
        width: 100%;
    }
    table, td {
        border: solid black 1px;
    }
    table.menu {
        width: auto;
        margin-right: 0px;
        margin-left: auto;
    }

    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>

  2. 3

    Utilizzare float: right invece:

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

    JSFiddle

    Soluzione 2:

    Come float è un non è una buona pratica per allineare gli elementi, è possibile utilizzare <td style="text-align: right"> e display: inline-table nella tabella:

        <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 soluzione 2

    • Come regola generale, è meglio evitare di usare float per l’allineamento. Effetti collaterali sul contenuto che segue.
    • ARgh! Non utilizzare align="right"; se si vuole andare con che approccio utilizzare text-align: right nel foglio di stile. E se volete un inline tabella, l’uso display: inline-table, non display: inline-block.
    • Grazie, ho aggiornato una soluzione alternativa.
  3. 3

    Facile

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

    Si può galleggiare la vostra tabella a destra facendo

    table {
        float: right;
        width: auto;
    }

    Demo

    Ma si prega di notare che sarà necessario cancellare il galleggiante per il contenuto che viene dopo è

    • Come regola generale, è meglio evitare di usare float per l’allineamento. Effetti collaterali sul contenuto che segue.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *