CSS Ширина таблицы - 100% + минус маржа

Я наткнулся на проблему, и я не совсем уверен, как ее решить.

У меня есть страница с несколькими div, одна из которых содержит таблицу, но имеет размер 20px. Мне нужна эта таблица для "приклада" против правой части другого div, которую я выполнил с использованием поля -20px - работает так, как я надеялся. Поскольку этот div (который охватывает всю правую часть страницы) является текучим, таблица имеет ширину 100%.

В то время как левая часть таблицы находится там, где я ее хочу, правая сторона теперь на 20 пикселей меньше всего.

Есть ли способ сохранить отрицательный запас справа, без него также перемещение таблицы 20px справа? Я пробовал несколько вещей без успеха. Моя таблица CSS вставлена ниже.

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

Ответы

Ответ 1

Вы можете полностью позиционировать свою таблицу, чтобы она выравнивалась справа.

position: absolute;
right: 0;

Невозможно добавить левое поле без перемещения таблицы, потому что смещение таблицы вычисляется таким образом: margin + padding + width = offset width.

Когда вы устанавливаете ширину как 100%, маржа и заполнение заставляют элемент расширяться.

Заполнение (слева) X, (справа) y + width = over 100%
over 100% + отрицательная ширина (X + y) = 100%.

Первое определение добавляет некоторые дополнения к каждой стороне таблицы. Второе определение сдвигает таблицу влево, потому что это отрицательный запас.

Ответ 2

Мое решение состояло в том, чтобы обернуть таблицу в div с отрицательным полем.

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

Ответ 3

Вы также можете установить ширину менее 100% и задать маржу auto:

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

Надеюсь, что это поможет.

Ответ 4

теперь возможно с CSS calc:

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

Ответ 5

попробуйте дать таблицу-макет: исправлено и см.