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

Статус
В этой теме нельзя размещать новые ответы.

nebikoff

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

Код для одноколоночной таблицы, которые делает правильное отображение:
@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;
}

}
 

Вложения

  • таб1.jpg
    таб1.jpg
    76,2 KB · Просмотры: 26
  • таб2.jpg
    таб2.jpg
    129,5 KB · Просмотры: 25
font-weight: 700;
Хмм, ну так себе...
 
Я бы вообще предложил использовать какой-нибудь фреймворк типа UIKit или Bootstrap. Там ведь все эти вопросы уже решены.
 
Я бы советовал всё на DIV переписать. Тогда намного больше возможностей появится. Можно будет выставить блокам нужную ширину в flex и не будет проблем с tr, в котором 2 колонки, сделать в одну колонку по ширине.

Если необходим пример, напишите, скину.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху