Как сделать таблицу адаптивной?

Подскажите плиз как сделать эту таблицу адаптивной?
https://jsfiddle.net/vrwgzw64/1/ (условный пример)

С мелким расширением данные не влезают и нужно как-то перестраивать таблицу, подскажите плиз какой подход использовать.

Я хотел изначально использовать Flexbox для таблиц, но что-то там как я понял нельзя сделать автоматическую подстройку ширины заголовков и ячеек на основе контента :( (так как это делает table)
  • Вопрос задан
  • 345 просмотров
Решения вопроса 1
@tyzberd
https://codepen.io/AllThingsSmitty/pen/MyqmdM
гуглите responsive table css и responsive table javascript
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
weranda
@weranda
По мне, так все просто — таблица она и есть таблица. Извращаться с ее видом в какие-то непонятные формы не вижу смысла. Обычно обертываю таблицу в DIV и задаю правила стилей:
white-space: nowrap;
overflow-x: auto;


P.S.
Единственное что можно сделать дополнительно на мобильных устройствах — добавить блок во всю высоту таблицы в правой ее части (полупрозрачный градиент). Можно увидеть подобную реализацию, к примеру, в поиске google в меню под полем ввода текста.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы