Как адаптивно подогнать таблицу под экраны телефонов?

Question

[Alexander Lashchevsky]

Здравствуйте!

Есть таблица, ширина которой не может быть меньше 800 пикселей (иначе всё начнёт дико съезжать). Идея таблицы примерно такая:

<table>
   <tr>
      <td>Программа:</td>
      <td>Программа Старт</td>
      <td>Программа Стандарт</td>
      <td>Программа Плюс</td>
      <td>Программа Абсолют</td>
   </tr>
</table>

Переводить таблицу в divы - плохая идея, так как в конец всё съедет. Табличная информация должна подаваться таблично. И в связи с этим возникает следующий вопрос: а что мне с ней делать на маленьких экранах? Есть какие-нибудь идеи?

P.S. Есть вариант трансформировать таблицу в следующий вариант:
Первая ячейка в каждой строчке становится сверху над оставшимися четырьмя. Т.е. обычный вариант выглядит так:

| Программа: | Программа Старт | Программа Стандарт | Программа Плюс | Программа Абсолют |

А на мобильниках сделать так (такая идея может подойти):

| Программа: {width: 100%;} |
| Программа Старт | Программа Стандарт | Программа Плюс | Программа Абсолют |

Но здесь появляется следующая проблема: а как это реализовать?

В общем мне бы хотелось получить от вас помощь по реализации этого варианта или какие-нибудь другие идеи.

С уважением,
Александр.

Answer 1

[Виталий Киренков]

<div>
  <table></table>
</div>

div { overflow-x: auto;}
Логика ясна и понятно, что должно происходить?

codepen.io/vitaliy_kirenkov/pen/xBFsb Типо такого...

Comments

[Alexander Lashchevsky]

Думал об этом, но хочется избежать подобного решения...

[Юрий Ярош]

ужс

[Виталий Киренков]

@Lashchevsky - это 2 строчки стилей. Хотите писать кучу стилей media queries - пожалуйста... я вам дал самый оптимальный вариант решения, где вам не нужно заворачиваться с размерами...

@voidnugget а более детально?

[Юрий Ярош]

@DeLaVega и где тут адаптивность / отзывчивость ?

[Виталий Киренков]

@voidnugget смотрю я на ваш профиль и понимаю, что могу просто не отвечать...

[Юрий Ярош]

@DeLaVega, правильно, лучше переходить на личности чем признавать собственные ошибки.

Answer 2

[Alexander Mischuk]

@voidnugget адаптивность это донести контент пользователю в удобной форме при различных разрешениях экрана. Изменить параметры для каждого элемента это из другой области. Возможно не из веба даже. @DeLaVega был прав и это отличный способ при адаптации таблиц со средним или большим объемом данных. Плюсы видны сразу. Во-первых это простота. Я и многие другие разработчики находят принцип KISS очень важным в разработке. Во-вторых, удобство. Таблица сохраняет свой естественный вид и достаточно простым движением пальца можно просмотреть таблицу. В-третьих, это занимает очень мало времени и в следствии чего экономит деньги заказчику.
Нахожу этот способ адаптации таблиц приемлемым для большинства случаев.

Answer 3

[Юрий Ярош]

Отзывчивость - изменение размеров под конкретное расширение, это горизонтальные ритмы в % и вертикальные в em'ах rem'ах, или любых других относительных шрифтовых размерностях.

Адаптивность - изменение позиционирования и формы каждого конкретного элемента с возможной заменой другими.

Есть display: table, display: table-cell, display: table-column, display: table-row их можно использовать для того что бы сделать из div'ов (или ещё чего-нить) табличку.

Количество колонок которое целесообразно отображать зависит от текущей ориентации дисплея.
Обычно для портретной ориентации это 2-3 колонки, а для альбомной 4-5.

На телефонах лучше всячески избегать табличек и откатываться к спискам.
На планшетах возможно построение таблички, но обычно просто сам список выводят в 2-3 колонки.

Адаптивность реализовывается посредством media queries.

Желательно использовать препроцессоры с миксинами для упрощения генерации под весь набор расширений.

Answer 4

[Александр Зубарев]

Если актуально, то вот мой ответ
Имеется также пример с адаптивной таблицей.