Почему псевдоэлемент с position: absolute не выпадает из потока?

Question

[Максим Шадрин]

Всем привет. Задача такова, что четные строки таблицы должны иметь фон во всю ширину страницы, в то время, как контент таблицы должен находиться внутри контейнера. Я решил реализовать данную фичу, навесив псевдокласс всем четным строкам. Разметку делал дивами, они ведут себя чуть послушней, чем нативная таблица. Но строкам задавал display: table-row, ячейкам display: table-cell
Проблема в том, что мой псевдоэлемент занимает место и ячейки сдвигаются вправо. Я не понимаю, почему.



Может существует более элегантный способ сверстать подобный случай?

Здесь пример

Comments

[Сергей delphinpro]

строки и ячейки таблицы не могут быть relative
Логика есть? как вы себе представляете ячейку таблицы, которая смещена на n пикселей?

[Максим Шадрин]

Сергей: и как быть, если мне нужна эта полоса на всю ширину? Делать ячейки inline-block? И имитировать табличный вид стилями? или городить кучу дополнительных элементов в разметке для этих полос?

Answer 1

[spike__x]

Может быть вместо before, after

Comments

[Максим Шадрин]

Вроде как работает. Для моего случая подойдет, спасибо!