Как правильно сделать эту таблицу в CSS?

Question

[Huntgold]

Есть таблица из 4 колонок и бесконечного кол-ва строк. Каждый див на картинке может меняться в размерах и должен становиться по середине. Думал сделать грид сетку, но есть важный нюанс, каждая колонка это отдельный список, то есть первая колонка - список 1, вторая - список 2 и т.д. И когда делаешь так, он ломается на последующих col1:

"col1 col2 col3 col4"
"col1 . . ."
". col2 col3 col4"
". col2 col3 col4"
"col1 . . ."

Думал в флексах сделать, но получается слишком массивный html код. Помогите сделать нормально не засирая html и css коды тучей мусора

Comments

[Ankhena]

Элементарно гридами и nth-child

Answer 1

[ForSureN1]

а чем вам собственно table не угодил ?

Comments

[Huntgold]

Никогда им не пользовался, видимо вот чем. Буду разбираться, но должно сработать. Спасибо

[ForSureN1]

Huntgold, Ну, если вы не можете построить это гридами, и уж тем более флексами, то рекомендую остановить свой взор на table, таблица не будет ломаться даже если будут пустые ячейки рядом

[Ankhena]

Huntgold, ForSureN1,

а чем вам собственно table не угодил ?

Table используют для табличных данных.

Если данные действительно табличные (сомневаюсь), то да, table.

Если нет, то задача элементарно решается гридами и nth-child.