Как сверстать такую таблицу с отступами?

Question

[aidarDev]

Надо сверстать таблицу как на макете.
Отступ должен быть только после каждой второй ячейки, получается эффект будто бы это 3 колонки.
Вот мой код - https://codepen.io/chaserof/pen/KKvORPm
Сейчас у меня отступы и у th, и у td, а надо только после td.

Comments

[Антон Литвиненко]

а что не так то? с виду как на макете только более растянутло

[aidarDev]

Антон Литвиненко, сейчас у меня отступы у каждой ячейки, а на макете отступ только после каждой второй ячейки. Получается эффект будто это 3 колонки, а у меня 6. Надеюсь поняли, сложно объяснить, посмотрите скриншот и мой пример внимательнее)

[Алексей Абрамов]

Нужно добавить border-collapse: collapse; для table

[aidarDev]

Алексей Абрамов, тогда отступы пропадут

[andand44]

Это больше похоже на таблицу с двумя ячейками в строке, разбитую на три колонки. Разбить таблицу на колонки можно с помощью columns

Answer 1

[Ankhena]

Попробуйте посмотреть внимательно на макет.
Где название и где значение и почему это они в 6 столбцов, парами по 2.
И всё встанет на свои места.

Вижу такие варианты:
1. Вообще не table. А dl, dt, dd.
2. Всё таки table, но в 2 столбца. А потом display grid (или flex)
3. Продолжать городить огород с отступами внутри ячеек или пустыми ячейками.

Для второго варианта:

Comments

[aidarDev]

Решил не париться, и сделал тупо на флексах, обычными div'ами. Спасибо за развернутый ответ :)

[Ankhena]

aidarDev, поменяйте дивы на семантичные dl, dt, dd и будет отлично.