Как сделать адаптивной такую чудную сетку? Или как убрать BORDER у крайних блоков?

Question

[Cheizer]

Друзья! Есть ли шанс ВООБЩЕ сделать адаптивной такую структуру? Что бы BORDER крайних блоков отсутствовал.
Я пока на фиксированом по ширине варианте завис, с css свойством :nth-child(1) 2 3 4 и тд и тп. Но если ширину родителя убрать и начать уменьшать, все рушится, адаптация есть, но с бордерами беда, не знаю как убрать их у крйних блоков, как быть? :( ПАМАГИТИИИ!!

Вот эта сетка которую хочу сверстать адаптивной:


Вот пример наверстал на codepin
https://codepen.io/Cheizer/pen/EQvXer

Подскажите куда копать пожалуйста, может как то calc свойством css или еще как? Как убрать BORDER у крайних блоков?

Answer 1

[Aleksey Solovyev]

Оберните свою таблицу в div, который будет overflow:hidden
Таблице задайте width, height 100% + border-width и translate X и Y на -ширинабордера
https://jsfiddle.net/5ynfpn3n/

но через table это делается проще

ps поправил первый пост

Comments

[Cheizer]

а понял, типа хитрость такая, но такая верстка не будет адаптивной к сожалению, так как высота фиксированна

[Aleksey Solovyev]

Роман Кузнецов, удалить absolute. размер таблицы calc(100% + 2 x borderWidth) и translate(-borderWidth, -borderWidth). Идея такая же. Или делать по нормальному через table

[Cheizer]

Aleksey Solovyev, уф, что то я не понял, а как задать borderWidth?

[Cheizer]

Aleksey Solovyev, А через Таблицу проще, это вы про TABLE TR и TD? Или про css display:table?

[Aleksey Solovyev]

borderWidth - это просто размер Вашего бордера. Просто поставьте везде одно значение
https://jsfiddle.net/5ynfpn3n/ - адаптивно?
Через table tr td

[Cheizer]

Aleksey Solovyev, Спасибо большое дорогой человек!!! Я думаю лучше решения не придумать, второй вариант это если только отлавливать положения через media запросы и nt child убирать бордеры. Как я делал. Такие сложные конструкции как ваша я даже никогда не использовал в css, но это круто, и кода меньше в разы.