@@webformyself а можно вопрос-подсказку по теме задать? Как раз сегодня верстал, все тени у таблицы есть, кроме нижней. Боковые появились только когда поставит свойство таблицы 98% высоты. С шириной то же самое не прокатило, все бордеры отключены, я проверял
Первый и третий самые подходящие. Второй вариант не годится из-за переполнения - на динамических сайтах неизвестно, какой контент будет в итоге, а обрезать строчки и скрывать контент это не хорошо. Сам в работе использую первый. Спасибо за то, что делитесь знаниями.
Варианты интересные, но первый самый простой и самый эффективный как по мне. Ведь другие способы точно также делают таблицу, только в другой вариации и их также придется скроллить.
Андрей Кудлай одна беда - дизайнеры (сколько я встречал макетов адаптивных таблиц) так не верстают. Вы слышали о выравнивании с использованием display:table-cell?
@@akjeress А дизайнеры вообще мало верстают, они больше рисуют)) А об использовании display:table-cell, конечно же, слышал - иначе не рассказал бы о таком варианте :) В любом случае, это еще один вариант (в видео показаны и другие) и использовать его или нет - решать уже Вам.
Еще вариант адаптации - скрывать некоторые поля в зависимости от ширины экрана, и как вариант выносить их в "плюсик" как реализовано в responsive data tables
Для меня разместить достаточно широкую таблицу для просмотра на мобильном или планшете пока нерешенная задача! В нашем проекте довольно часто возникают таблицы с данными, которые минимум имеют 8-10 столбцов и 10-25 строк (плюс пагинация). Обычная горизонтальная прокрутка, как показана в видео, тут не походит совсем! Второй вариант нравится больше, но на узком (вертикальная ориентация) экране мобильного хорошо если удается одновременно показать столбец с заголовками и пару столбцов (те которые были строками) с данными. Это очень мало для реального анализа данных... Думаю с таблицами, в обычном виде, тут задачу вообще не решить, но ничего толкового пока сами не придумали и нагуглить тоже не удалось. Если кто-то предложит решение или хотя бы направление в котором рыть, то буду очень благодарен! P.S.: Пока нас спасает, что в основном данные обрабатываются на десктопах, собственно главным образом потому, что с мобильного продуктом пользоваться почти невозможно... А очень хотелось бы задействовать еще и рынок мобильных устройств!
Добрый день, у вас на канале будут уроки в WebPack? Имею ввиду верстку в этом сборщике, т.к. сейчас это современная верстка + удобно. А так же PSD + Zeplin, или Figma + Zeplin.
ну так себе варианты, я бы лучше сделал два отдельных варианта, первый отображается на мобилках, а второй на десктопе, конечно есть некое дублирование, но зато более гибко и результат на мобилке будет лучше
Я думал реально можно адаптировать что весь контент будет на екране а не за пределами. Вывод такой - от стандартного варианта никуда не дется. Второй только для статических страниц типу лендинга может подойти. Так как. При динамическом он негодится на практике от слова совсем. Постоянно сталкиваюсь с тем что дизайнер нарисует красиво, верстальщик сверстает поудаляв лишнийтекст что бы красиво, а бекенд начинает голову ламать с динамическим контентом. Все лезет, перескакивает, налазит, пустоты. 2 недели назад вернул такую верстку на доработку
Спасибо за подробное видео про div. Чётко, кратко и ясно! 👍
Супер, спасибо большое за наглядный урок
@@webformyself а можно вопрос-подсказку по теме задать? Как раз сегодня верстал, все тени у таблицы есть, кроме нижней. Боковые появились только когда поставит свойство таблицы 98% высоты. С шириной то же самое не прокатило, все бордеры отключены, я проверял
Первый и третий самые подходящие. Второй вариант не годится из-за переполнения - на динамических сайтах неизвестно, какой контент будет в итоге, а обрезать строчки и скрывать контент это не хорошо. Сам в работе использую первый. Спасибо за то, что делитесь знаниями.
Благодарю! Лучший урок по адаптивным таблицам..
Благодарю за урок!
Как всегда всё отлично.
Спасибо.
Всегда пожалуйста ;)
Варианты интересные, но первый самый простой и самый эффективный как по мне. Ведь другие способы точно также делают таблицу, только в другой вариации и их также придется скроллить.
Благодарю! Очень полезный контент!
крутое и полезное видео! спасибо!
Пожалуйста 😉
Андрей Кудлай одна беда - дизайнеры (сколько я встречал макетов адаптивных таблиц) так не верстают.
Вы слышали о выравнивании с использованием display:table-cell?
@@akjeress А дизайнеры вообще мало верстают, они больше рисуют)) А об использовании display:table-cell, конечно же, слышал - иначе не рассказал бы о таком варианте :) В любом случае, это еще один вариант (в видео показаны и другие) и использовать его или нет - решать уже Вам.
Еще вариант адаптации - скрывать некоторые поля в зависимости от ширины экрана, и как вариант выносить их в "плюсик" как реализовано в responsive data tables
Супер, спасибо)
Спасибо
Можно вопрос? Спасибо. А как делать пропуски в клетках таблицы, типо таблицы, в которой пара клеток соединены вместе и без границ?
да согласен много нового я узнал.
Для меня разместить достаточно широкую таблицу для просмотра на мобильном или планшете пока нерешенная задача! В нашем проекте довольно часто возникают таблицы с данными, которые минимум имеют 8-10 столбцов и 10-25 строк (плюс пагинация). Обычная горизонтальная прокрутка, как показана в видео, тут не походит совсем! Второй вариант нравится больше, но на узком (вертикальная ориентация) экране мобильного хорошо если удается одновременно показать столбец с заголовками и пару столбцов (те которые были строками) с данными. Это очень мало для реального анализа данных... Думаю с таблицами, в обычном виде, тут задачу вообще не решить, но ничего толкового пока сами не придумали и нагуглить тоже не удалось. Если кто-то предложит решение или хотя бы направление в котором рыть, то буду очень благодарен!
P.S.: Пока нас спасает, что в основном данные обрабатываются на десктопах, собственно главным образом потому, что с мобильного продуктом пользоваться почти невозможно... А очень хотелось бы задействовать еще и рынок мобильных устройств!
незабываемый комментарий)
Начало про адаптивность в 8:25
Если в таблице эксель есть формулы, как можно экспортировать такую таблицу в HTML, что бы все формулы были активными на сайте
А как можно сделать интерактивную таблицу типа экселя?
👍
У саблайма есть светлая тема??? Чтоо?
Добрый день, у вас на канале будут уроки в WebPack? Имею ввиду верстку в этом сборщике, т.к. сейчас это современная верстка + удобно.
А так же PSD + Zeplin, или Figma + Zeplin.
Добрый день! Уроки по WebPack у нас уже были - webformyself.com/category/premium/javascript-premium/webpackpremium/
ну так себе варианты, я бы лучше сделал два отдельных варианта, первый отображается на мобилках, а второй на десктопе, конечно есть некое дублирование, но зато более гибко и результат на мобилке будет лучше
а вообще конечно чаще всего использую первый вариант, бутстраповский ))
Я думал реально можно адаптировать что весь контент будет на екране а не за пределами.
Вывод такой - от стандартного варианта никуда не дется. Второй только для статических страниц типу лендинга может подойти. Так как. При динамическом он негодится на практике от слова совсем.
Постоянно сталкиваюсь с тем что дизайнер нарисует красиво, верстальщик сверстает поудаляв лишнийтекст что бы красиво, а бекенд начинает голову ламать с динамическим контентом. Все лезет, перескакивает, налазит, пустоты.
2 недели назад вернул такую верстку на доработку