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

nebikoff

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

Код для одноколоночной таблицы, которые делает правильное отображение:
@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 · Просмотры: 14
  • таб2.jpg
    таб2.jpg
    129,5 KB · Просмотры: 13

mumins

Интернетов сантехник
Регистрация
11 Мар 2009
Сообщения
1.004
Реакции
974
font-weight: 700;
Хмм, ну так себе...
 

FullNull

Постоялец
Регистрация
7 Фев 2013
Сообщения
69
Реакции
56
Я бы вообще предложил использовать какой-нибудь фреймворк типа UIKit или Bootstrap. Там ведь все эти вопросы уже решены.
 
Сверху