Кожен верстальник рано чи пізно стикається з питанням адаптації таблиць під планшети та мобільні пристрої. Насправді це справді проблема, таблична верстка не призначена для таких цілей. У часи коли її часто використовували, ні хто й припустити не міг, що технології адаптації крокують так далеко. Але відмовитись на всі 100% від табличної верстки ми не можемо. Вона й досі зустрічається на сайтах, в інтернет магазинах. Зазвичай це списки замовлень, чи характеристики товарів. Чому так? Тому що такі таблички не просто скинути дивами (div) і зациклити т.к. Функціонал двигунів буде виводити ці параметри в циклі. Але тоді виникає питання, як зробити адаптивну таблицю? Та ще що б не дописувати до неї класи, для всіх таблиць? Є рішення. І так, приступимо.
Для початку ви можете завантажити та подивитися як працює адаптивна таблиця.
Довго та нудно пояснювати не бачу сенсу. По суті все, що вам потрібно зробити, це дописати стилі:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | table {text-align: center;} @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none!important; width: 100%!important; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } /* Label the data */ } |
У моєму варіанті я зовсім приховую хедер таблиці, назви, вони мені не потрібні. В архіві ви можете побачити, як їх залишити, вони прописуються через властивість before. На цьому все адаптивна таблиця готова. Якщо у вас є питання, завжди радий допомогти.
2. Спосіб стилізації таблиць для телефону – поява горизонтального скрола, прокручування.
Додайте у ваш css файл наступний код
1 2 3 4 | @media only screen and (max-width: 767px){ /* Tables */ table {margin: auto;border-collapse: collapse;overflow-x: auto;display: block;width: fit-content;max-width: 100%;} }ta |
Отличное решение