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

Question

[webe]

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

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

Я хотел изначально использовать Flexbox для таблиц, но что-то там как я понял нельзя сделать автоматическую подстройку ширины заголовков и ячеек на основе контента :( (так как это делает table)

Answer 1

[tyzberd]

https://codepen.io/AllThingsSmitty/pen/MyqmdM
гуглите responsive table css и responsive table javascript

Comments

[webe]

спс, с content: attr(data-label); крутая идея)

Answer 2

[weranda]

По мне, так все просто — таблица она и есть таблица. Извращаться с ее видом в какие-то непонятные формы не вижу смысла. Обычно обертываю таблицу в DIV и задаю правила стилей:

white-space: nowrap;
overflow-x: auto;

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