Герб Укріїни
Віримо в Україну та ЗСУ. Слава Україні!

Адаптивна таблиця (як зробити адаптивну таблицю Table на CSS – приклад)

Кожен верстальник рано чи пізно стикається з питанням адаптації таблиць під планшети та мобільні пристрої. Насправді це справді проблема, таблична верстка не призначена для таких цілей. У часи коли її часто використовували, ні хто й припустити не міг, що технології адаптації крокують так далеко. Але відмовитись на всі 100% від табличної верстки ми не можемо. Вона й досі зустрічається на сайтах, в інтернет магазинах. Зазвичай це списки замовлень, чи характеристики товарів. Чому так? Тому що такі таблички не просто скинути дивами (div) і зациклити т.к. Функціонал двигунів буде виводити ці параметри в циклі. Але тоді виникає питання, як зробити адаптивну таблицю? Та ще що б не дописувати до неї класи, для всіх таблиць? Є рішення. І так, приступимо.

Для початку ви можете завантажити та подивитися як працює адаптивна таблиця.

 Download – Demo

 

Довго та нудно пояснювати не бачу сенсу. По суті все, що вам потрібно зробити, це дописати стилі:

Читайте також:  Віддалена робота в IT за кордоном. Переваги та недоліки
Читайте також:  Огляд можливостей зйомки в HDR на DJI Mavic 3

У моєму варіанті я зовсім приховую хедер таблиці, назви, вони мені не потрібні. В архіві ви можете побачити, як їх залишити, вони прописуються через властивість before. На цьому все адаптивна таблиця готова. Якщо у вас є питання, завжди радий допомогти.

2. Спосіб стилізації таблиць для телефону – поява горизонтального скрола, прокручування.

Додайте у ваш css файл наступний код

Tags
Олег

Отличное решение

Відповіcти
Ярослав

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

Відповіcти
Юлия

Приветствую.
А как сделать, чтобы хедер таблицы не скрывался совсем? У меня таблица с размерами и без хедера никак.
тут вот пример на тестовом.
Очень буду благодарна за помощь!!! Заранее спасибо

Відповіcти
Digrand

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

Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *