Верстка таблиц

[Delat]

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

[npofopr]

эм... никогда ничего нет общепринятого.

Наберите в поисковик responsive table и выбирайте тот вариант, который подойдёт под вашу задачу.

Наиболее простой, это делать "прокрутку" таблицы.

Более сложный, через атрибуты построчно выводить таблицу. Не знаю, как более правильно описать)

[Delat]

вот у меня не работает прокрутка https://jsfiddle.net/Delat/4b5wfk6z/1/

из-за float:left по всей видимости, как исправить?

[npofopr]

По-моему вы ещё сами не разобрались, что хотите сделать. 
Зачем вообще float? 

Зачем вам вообще таблица? Вы её вдоль и поперёк раскурочили. 

Для tr поставьте inline-block вместо float: left;

https://jsfiddle.net/npofopr/4b5wfk6z/2/

[Delat]

14 минуты назад, npofopr сказал:

По-моему вы ещё сами не разобрались, что хотите сделать. 
Зачем вообще float? 

Зачем вам вообще таблица? Вы её вдоль и поперёк раскурочили. 

Для tr поставьте inline-block вместо float: left;

https://jsfiddle.net/npofopr/4b5wfk6z/2/

Я сделал сначала таблицу для больших размеров экранов https://jsfiddle.net/Delat/c7nv7c1s/

потом возник вопрос как сделать для мобильных и планшетов. Собственно уперся в полосу прокрутки - она не срабатывала. Решил задать вопрос здесь, Вы помогли, спасибо! Как-то так

[Delat]

Появились сложности ))

Подскажите, как исправить блок thead, он съезжает вниз при уменьшении экрана http://www.awesomescreenshot.com/image/2049476/53ea8a5f704048663ed7868a9389ee14

https://jsfiddle.net/Delat/qe3dp1c2/

Edited January 12, 2017 by Delat

[npofopr]

Делайте тоже через inline-block и white-space: nowrap

Посмотрите как другие делают https://elvery.net/demo/responsive-tables/

Мне вообще нравится больше через data- атрибуты)