Сложная таблица для мобильных устройств

[nebikoff]

Переделываю сайт на широком шаблоне. Обрадовался, что нашел способ сделать удобную таблицу для просмотра. Но когда посмотрел на мобильных устройствах, ужаснулся. Возможно сделать такую таблицу для правильного просмотра на мобильных?

Код для одноколоночной таблицы, которые делает правильное отображение:

Спойлер: Код

@media screen and (max-width: 600px) {
table.dop thead {
display: none;
}
table.dop tr {
display: block;
width: 100%;

}
table.dop td {
display: block;
text-align: center !important;
width: 100% !important;
height: auto !important;
}
table.dop td:before {
**content: attr(aria-label);
font-weight: 700;
width: 100%;
}

table.dop th {
display: block;
text-align: center;
width: 100%;
padding: 15px 5px;
}

table.dop {

margin-bottom: 15px;
width: 100% !important;
}

.item-inner {
padding-right: 10px !important;
}

}

 

[mumins]

font-weight: 700;
Хмм, ну так себе...

 

[FullNull]

Я бы вообще предложил использовать какой-нибудь фреймворк типа UIKit или Bootstrap. Там ведь все эти вопросы уже решены.

 

[Viscount Vic]

Я бы советовал всё на DIV переписать. Тогда намного больше возможностей появится. Можно будет выставить блокам нужную ширину в flex и не будет проблем с tr, в котором 2 колонки, сделать в одну колонку по ширине.

Если необходим пример, напишите, скину.