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

Question

[angry_yum]

Подскажите пожалуйста как правильно и адаптивно сверстать вот такую табличку?

Comments

[Николай Чуприк]

Уточните, что значит "правильно". Она должна оставаться в один ряд и просто сжиматься? Или ряды должны при некоторой критической ширине переноситься? Если переноситься, то как? По одной ячейки, по две? Или может таблица сразу должна превращаться в вертикальную? Содержимое ячеек должно отображаться полностью или его можно сокращ... ? Пересённые на следующий ряд ячейки должны быть такой же ширины, как находящиеся над ними, или уже это неважно?

В адаптивном дизайне придумать как должно выглядеть, порой важнее чем как это реализовать.

Answer 1

[Евгений Корначев]

таблица 3 строки на 4 столбца, во второй строке для каждой ячейки - красная рамка слева.

Answer 2

[Василий Васильев]

Обычной CSS таблицей. Или вы хотели узнать как вообще верстать таблицы? Уточняйте вопрос.

Comments

[angry_yum]

Да извиняюсь неправильно сформулировал.
Как сделать вот эти маленькие черточки?

[VerniteAccount]

Как насчет :before для <th>?

[Dymok]

angry_yum, псевдоэлементом для ячеек можно попробовать.