Material Design Lite: как отобразить таблицу на мобильном телефоне?

У меня есть большая таблица, которая отображает много данных.

На дестопе все выглядит нормально, а на мобильном просто вырезает данные, и я не могу получить доступ к тому, что на столе, вот так:

Настольная версия таблицы

Стол на рабочем столе

Мобильная версия таблицы

введите здесь описание изображения

Есть ли способ сделать таблицы доступными на мобильных устройствах? Или это единственный способ сохранить данные только в нескольких строках? И разделить столбцы на разных картах?

(И да, я знаю, что это не лучшее применение для карты, я пока экспериментирую с mdl).

Большое тебе спасибо.


person LoveAndHappiness    schedule 28.07.2015    source источник
comment
Насколько я знаю, таблицы еще не адаптируются, поэтому вам может потребоваться выполнить некоторые специальные действия, чтобы сделать их удобными для мобильных устройств.   -  person robjez    schedule 29.07.2015
comment
Хороший дизайн таблицы (с использованием всех наворотов, вплоть до tbody и области действия и т. д.), вероятно, по-прежнему не будет отвечать, но он будет семантически хорошо построен таким образом, что должен сделать его более перспективным (для нативных браузерных решений). которые, как мы знаем, когда-нибудь появятся), а также их легче анализировать/сканировать/использовать для дополнительных решений (например, с использованием новых шаблонов HTML/Shadow DOM/некоторых решений на основе js/и т. д. Так что все же лучше сделать таблицу смысловой и истинной, а затем сосредоточиться на презентации.   -  person Anthony    schedule 22.10.2015
comment
Есть новости по этому поводу?   -  person gonephishing    schedule 20.07.2017


Ответы (1)


Если еще не поздно, вы можете использовать этот трюк, чтобы сделать его отзывчивым.

https://css-tricks.com/responsive-data-tables/

person sam    schedule 22.10.2015
comment
Очки за ссылку на точную статью, о которой я подумал, когда увидел заголовок по этому вопросу. Я все еще не согласен с тем, что вертикальный вывод таблицы является лучшим решением, но это определенно один из наиболее разумных и визуально привлекательных вариантов. - person Anthony; 22.10.2015
comment
в статье, упомянутой выше, есть дополнительные возможности, проверьте Flip Scroll для лучшего варианта Адаптивная прокрутка Filp - person sam; 22.10.2015