CSS Szerokość stołu - 100% + minus margines

Natknąłem się na problem, którego nie jestem całkowicie pewien, jak rozwiązać.CSS Szerokość stołu - 100% + minus margines

Mam stronę z liczbą elementów div, z których jedna zawiera tabelę, ale ma margines 20 pikseli. Potrzebuję tego stołu, aby "uderzyć" w prawą stronę innego elementu div, który osiągnąłem przy użyciu marginesu -20px - działa tak, jak się spodziewałem. Ponieważ ten element div (który obejmuje całą prawą stronę strony) jest płynny, tabela ma szerokość 100%.

Podczas gdy lewa strona stołu jest tam, gdzie chcę, prawa strona ma teraz 20px mniej niż wszystko inne.

Czy istnieje sposób na utrzymanie ujemnego marginesu po prawej stronie, bez przesunięcia stołu o 20 pikseli od prawej? Próbowałem kilku rzeczy bez powodzenia. Mój CSS tabeli jest wklejony poniżej.

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

Źródło

2011-10-02 Lee

możliwe duplikat [Div szerokości 100% minus ustalonej ilości pikseli] (http://stackoverflow.com/questions/651317/div- width-100-minus-fixed-amount-of-pixels) – Gajus

Można całkowicie ustawić stolik tak, aby był wyrównany po prawej stronie.

position: absolute; 
right: 0;

Nie ma sposobu, aby dodać lewy margines bez przesuwania stołu, ponieważ tabela przesunięcia jest obliczana w następujący sposób: marża + dopełnienie + width = przesunięcie szerokości.

Po ustawieniu szerokości na 100%, margines i dopełnienie powodują, że element się rozszerza.

przekładki (po lewej) X (z prawej) y + szerokość = over 100%
over 100% + szerokość ujemny (X + Y) = 100%.

Pierwsza definicja dodaje dopełnienie po każdej stronie stołu. Druga definicja przesuwa tabelę w lewo, ponieważ jest to margines ujemny.

Źródło

2011-10-02 10:25:50

Dzięki Rob - to działało sortowanie z prawej strony, ale wydaje się stwarzać różne problemy po lewej stronie. Podejrzewam, że walczę z przegraną bitwą. Przyszło mi jednak do głowy, że prostszym rozwiązaniem byłoby dodanie marginesu do pozostałych elementów, aby dopasować je do tabeli. – Lee

BTW - dziękuję również za wyjaśnienie, ma pełny sens tak, jak to wyjaśniłeś. – Lee

Dzięki za wskazanie tego Roba - wcześniej nie zauważyłem funkcji Accept. – Lee

spróbuj dając table-layout: fixed i zobaczyć

Źródło

2011-10-02 10:37:53 Bala

Można również ustawić szerokość do mniej niż 100% i ustawić margines auto:

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

Nadzieję, że to pomaga.

Źródło

2012-12-07 16:06:40 leandropoli

Nie mogę uwierzyć, że nie ma lepszego rozwiązania, ale przynajmniej ten ma równy margines po obu stronach. – ColinM

Moim rozwiązaniem było zawinięcie tabeli wewnątrz elementu div z marginesem ujemnym.

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

Źródło

2013-05-21 17:52:25 mbillard

Porzuciłem używanie div, aby automatycznie zmienić rozmiar i położenie elementów mojej strony. Wykonanie tabeli o szerokości 100%, a następnie posiadanie komórek zajmujących wysokość i szerokość marginesów, będzie dobrze pasowało do mojego elementu div dziecka. – Jonats

jest teraz możliwe CSS calc:

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

Źródło

2015-05-10 15:50:09 YakovL

CSS Szerokość stołu - 100% + minus margines

Odpowiedz

Powiązane problemy