CSS Ancho de tabla: margen de 100% + menos

He tropezado con un problema que no estoy del todo seguro de cómo resolverlo.CSS Ancho de tabla: margen de 100% + menos

Tengo una página con varios divs, uno de los cuales contiene una tabla pero tiene un margen de 20px. Necesito esta tabla para 'tope' contra el lado derecho de otro div, que he logrado usando un margen de -20px - funciona como esperaba. Como este div (que cubre todo el lado derecho de la página) es fluido, la tabla tiene un ancho del 100%.

Mientras que el lado izquierdo de la mesa está donde yo quiero, el lado derecho ahora está 20px corto de todo lo demás.

¿Hay alguna manera de mantener el margen negativo a la derecha, sin mover también la tabla 20px desde la derecha? Probé algunas cosas sin éxito. Mi tabla CSS está pegada a continuación.

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

Fuente

2011-10-02 Lee

posible duplicado de [anchura 100% menos cantidad fija Div de píxeles] (http://stackoverflow.com/questions/651317/div- width-100-minus-fixed-amount-of-pixels) – Gajus

Posiblemente coloque su mesa, de modo que quede alineada a la derecha.

position: absolute; 
right: 0;

No hay manera de agregar un margen izquierdo sin mover la mesa, ya que la tabla de desplazamiento se calcula de esta manera: Margen + acolchado + ancho = ancho offset.

Cuando establece el ancho en 100%, el margen y el relleno hacen que el elemento se expanda.

Relleno (izquierda) X, (a la derecha) y + width = over 100%
over 100% + anchura negativo (X + y) =100%.

La primera definición agrega algo de relleno a cada lado de la tabla. La segunda definición desplaza la tabla hacia la izquierda, porque es un margen negativo.

Fuente

2011-10-02 10:25:50

Gracias Rob - eso funcionó clasificando el lado derecho, pero parece crear todo tipo de problemas a la izquierda. Sospecho que estoy luchando una batalla perdida con esto. Sin embargo, se me ocurrió que una solución más simple sería agregar margen a los demás elementos para ponerlos en línea con la tabla. – Lee

BTW - gracias también por la explicación, tiene todo el sentido de la forma en que lo explicaste. – Lee

Gracias por señalar eso, Rob: no había notado antes la función Aceptar. – Lee

trate de darle table-layout: fijo y ver

Fuente

2011-10-02 10:37:53 Bala

También puede establecer el ancho a menos del 100% y ajuste automático de margen:

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

espero que ayude.

Fuente

2012-12-07 16:06:40 leandropoli

No puedo creer que no haya una solución mejor, pero al menos esta tiene el mismo margen en ambos lados. – ColinM

Mi solución fue envolver la tabla dentro de un div con el margen negativo.

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

Fuente

2013-05-21 17:52:25 mbillard

Había dejado de usar div para cambiar el tamaño y posicionar automáticamente los elementos de mi página. Hacer una tabla con un ancho del 100% y luego tener celdas que ocupen el alto y el ancho de los márgenes realmente hará el trabajo muy bien para mi div hijo. – Jonats

ahora es posible con CSS calc:

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

Fuente

2015-05-10 15:50:09 YakovL

CSS Ancho de tabla: margen de 100% + menos

Respuesta

Cuestiones relacionadas