Адаптивные таблицы

В верстке таблицы являются одним из элементов, с адаптивностью которых на сайте могут возникнуть проблемы. Хотелось бы, чтобы и таблицы были адаптивными, и табличная информация осталась при этом читабельной и удобной для восприятия.

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

[maadyrondar]

Спасибо за подробное видео про div. Чётко, кратко и ясно! 👍

[pnuqivf]

Супер, спасибо большое за наглядный урок

[milleniym]

Благодарю! Лучший урок по адаптивным таблицам..

[blackcelebration]

Первый и третий самые подходящие. Второй вариант не годится из-за переполнения - на динамических сайтах неизвестно, какой контент будет в итоге, а обрезать строчки и скрывать контент это не хорошо. Сам в работе использую первый. Спасибо за то, что делитесь знаниями.

[Sergey_Klimov]

Варианты интересные, но первый самый простой и самый эффективный как по мне. Ведь другие способы точно также делают таблицу, только в другой вариации и их также придется скроллить.

[ХакерКот]

Можно вопрос? Спасибо. А как делать пропуски в клетках таблицы, типо таблицы, в которой пара клеток соединены вместе и без границ?

[alexsviridenko]

Еще вариант адаптации - скрывать некоторые поля в зависимости от ширины экрана, и как вариант выносить их в "плюсик" как реализовано в responsive data tables

[wowik]

Если в таблице эксель есть формулы, как можно экспортировать такую таблицу в HTML, что бы все формулы были активными на сайте

[dmitryivanov]

Для меня разместить достаточно широкую таблицу для просмотра на мобильном или планшете пока нерешенная задача! В нашем проекте довольно часто возникают таблицы с данными, которые минимум имеют 8-10 столбцов и 10-25 строк (плюс пагинация). Обычная горизонтальная прокрутка, как показана в видео, тут не походит совсем! Второй вариант нравится больше, но на узком (вертикальная ориентация) экране мобильного хорошо если удается одновременно показать столбец с заголовками и пару столбцов (те которые были строками) с данными. Это очень мало для реального анализа данных... Думаю с таблицами, в обычном виде, тут задачу вообще не решить, но ничего толкового пока сами не придумали и нагуглить тоже не удалось. Если кто-то предложит решение или хотя бы направление в котором рыть, то буду очень благодарен!

P.S.: Пока нас спасает, что в основном данные обрабатываются на десктопах, собственно главным образом потому, что с мобильного продуктом пользоваться почти невозможно... А очень хотелось бы задействовать еще и рынок мобильных устройств!

[Jerald]

А как можно сделать интерактивную таблицу типа экселя?

[jackdoe]

Добрый день, у вас на канале будут уроки в WebPack? Имею ввиду верстку в этом сборщике, т.к. сейчас это современная верстка + удобно.
А так же PSD + Zeplin, или Figma + Zeplin.

[indigoram]

ну так себе варианты, я бы лучше сделал два отдельных варианта, первый отображается на мобилках, а второй на десктопе, конечно есть некое дублирование, но зато более гибко и результат на мобилке будет лучше

[vasil-vasil]

Я думал реально можно адаптировать что весь контент будет на екране а не за пределами.
Вывод такой - от стандартного варианта никуда не дется. Второй только для статических страниц типу лендинга может подойти. Так как. При динамическом он негодится на практике от слова совсем.
Постоянно сталкиваюсь с тем что дизайнер нарисует красиво, верстальщик сверстает поудаляв лишнийтекст что бы красиво, а бекенд начинает голову ламать с динамическим контентом. Все лезет, перескакивает, налазит, пустоты.
2 недели назад вернул такую верстку на доработку