Larghezza tabella CSS - 100% + margine meno

Mi sono imbattuto in un problema che non sono completamente sicuro su come risolvere.Larghezza tabella CSS - 100% + margine meno

Ho una pagina con un numero di div, uno dei quali contiene una tabella ma ha un margine di 20px. Ho bisogno di questo tavolo per 'buttare' contro il lato destro di un altro div, che ho ottenuto usando un margine di -20px - funziona come speravo. Poiché questo div (che copre l'intero lato destro della pagina) è fluido, la tabella ha una larghezza del 100%.

Mentre il lato sinistro del tavolo è dove lo voglio, il lato destro è ora 20px a corto di tutto il resto.

C'è un modo per mantenere il margine negativo a destra, senza spostare anche il tavolo 20px da destra? Ho provato alcune cose senza successo. La mia tabella CSS è incollata di seguito.

.pricetable { 
    width:100%; 
    margin-left: -20px; 
    padding: 5px; 
}

fonte

2011-10-02 Lee

possibile duplicato del [Div larghezza 100% meno quantità fissa di pixel] (http://stackoverflow.com/questions/651317/div- width-100-minus-fixed-amount-of-pixel) – Gajus

Si può posizionare il tavolo in modo assoluto, in modo che sia allineato a destra.

position: absolute; 
right: 0;

Non c'è modo di aggiungere un margine sinistro senza spostare il tavolo, perché la tabella di offset viene calcolato in questo modo: il margine di + padding + width = Larghezza offset.

Quando si imposta la larghezza su 100%, il margine e il riempimento causano l'espansione dell'elemento.

Padding (sinistra) X, (a destra) y + width = over 100%
over 100% + larghezza negativo (X + y) =100%.

La prima definizione aggiunge un po 'di imbottitura su ciascun lato del tavolo. La seconda definizione sposta la tabella verso sinistra, perché è un margine negativo.

fonte

2011-10-02 10:25:50

Grazie Rob - che ha funzionato a selezionare il lato destro, ma sembra creare tutti i tipi di problemi a sinistra. Sospetto che sto combattendo una battaglia persa con questo. Tuttavia, mi è venuto in mente che una soluzione più semplice sarebbe quella di aggiungere margine agli altri elementi per portarli in linea con la tabella. – Lee

BTW - grazie anche per la spiegazione, ha perfettamente senso nel modo in cui lo hai spiegato. – Lee

Grazie per aver sottolineato che Rob - non aveva notato la funzione Accetta prima. – Lee

provare a dare table-layout: fixed e vediamo

fonte

2011-10-02 10:37:53 Bala

È possibile anche impostare la larghezza inferiore al 100% e impostare automaticamente margin:

.pricetable { 
    width:90%; 
    margin: auto; 
}

Speranza che aiuta.

fonte

2012-12-07 16:06:40 leandropoli

Non riesco a credere che non ci sia una soluzione migliore, ma almeno questo ha lo stesso margine su entrambi i lati. – ColinM

La mia soluzione era di avvolgere il tavolo all'interno di un div con il margine negativo.

<div style="margin-right:-20px"> 
    <table style="width:100%"> 
    ... 
    </table> 
</div>

fonte

2013-05-21 17:52:25 mbillard

Avevo rinunciato a usare div per ridimensionare e posizionare automaticamente gli elementi della mia pagina. Fare un tavolo con larghezza del 100% e poi avere le celle occupano l'altezza e la larghezza dei margini faranno davvero il lavoro piacevolmente a mio figlio div. – Jonats

è ora possibile con i CSS calc:

.pricetable { 
    width: calc(100% - 20px); 
    margin-left: -20px; 
    padding: 5px; 
}

fonte

2015-05-10 15:50:09 YakovL

Larghezza tabella CSS - 100% + margine meno

risposta

Problemi correlati