Нельзя использовать отрицательный правый край для элемента таблицы?

Я пытаюсь использовать элементы table-cell в сетке, которая использует отрицательные поля в строках для устранения левого и правого желобов на вложенных элементах сетки. Это отлично работает на элементах с плавающим и встроенным блоками, но элементы с display: table, соблюдая отрицательное левое поле, игнорируют отрицательное правое поле:

Странно, а? Простая демонстрация: http://jsfiddle.net/57FAN/1/

Все браузеры, похоже, реализовали это так же, к сожалению. Любые идеи?

P.S. Пусть отложите обсуждение по таблицам - * элементов для макета до тех пор, пока не будет стандартизирована гибкая коробка.

Ответ 1

Таблица не игнорирует отрицательный запас, но только 100% по ширине и сдвинута на 5 пикселей влево. Вам понадобится "100% + 2 * 5px", чтобы полностью заполнить серое пространство.

Строка не имеет ширины, поэтому используется вся доступная ширина.

Если вы будете использовать

.row {
  margin: 0 -5px;
  width: 100%;
}

вы увидите, что ширина равна

Ответ 2

В вашем коде больше свойств margin и padding. так что это выглядит так. Здесь я исправил некоторые коды.

Fiddle DEMO