Персональна сторінка shra, блог фріленсерів, веб-розробника на PHP. Тут я ділюся своїм досвідом і думками, проводжу досліди над людьми, збираю нематеріальні свідоцтва власної дурості. Використовуючи приклади програмного коду з даного сайту, ви приймаєте всю відповідальність за можливі наслідки їх використання, включаючи ваше психічне здоров'я і інтереси третіх осіб.
Таблиці - це не той елемент верстки, який можна зробити адаптивним. Всі трюки по адаптивності розбиваються об круті береги доцільності самих таблиць.
Стовпці таблиць не можна переносити (навіть якщо і можна було б їх переносити, все одно цього не можна робити). І навіть
з 4-5 стовпцями стає незручною і незграбною, розносячи в пух і прах вашу можливо адаптивну верстку; діючи як слон в посудній лавці, коли ви дивитеся на сторінку на девайсі з 400 точками по ширині.
Що можна зробити, якщо таблиця необхідна?
Розглянемо кілька підходів до вирішення завдання.
Варіант - обійтися без таблиць, теж має місце для існування. Наприклад, таблицю можна розмістити у файлі формату більш для неї відповідному - pdf, xls і т.п. А на сайті зробити посилання на цей файл. Так надходять банки, публікуючи свої тарифні керівництва.
Але коли таблиця - це важлива частина змісту статті, до якої потрібно звертатися в міру читання матеріалу, то так проблему не оминути.
Таблиця - картинка
Задавши CSS, на кшталт
ви отримаєте авто масштабування картинки під будь-який розмір вікна браузера. Як би користувач не «грав» з розмірами вікна, картинка не буде вилазити за краї і мати ідеальні пропорції.
оптимізація таблиць
Іноді можливо «розбити» або організувати дані в таблиці так, що вона розпадеться на кілька більш компактних об'єктів. Утворені таблиці стануть влазити в верстку і будуть нормально відображатися на будь-яких пристроях.
Не завжди можна застосувати, та й обмеження по мінімальній ширині шаблону залишаться.
Вбудовування в контейнер з горизонтальною прокруткою
Так як таблиця і навколишній її текст знаходяться в одному і тому ж контейнері, то занадто широка таблиця порушує верстку. Цього можна уникнути, обернувши таблицю в власний адаптивний по ширині контейнер.
Хоча всі щасливі, але мінуси є.
Довгі таблиці на робочому столі можна «перегортати» вліво-вправо тільки дійшовши до нижньої межі елемента
, тому лінійка прокрутки відображена саме там. На мобільних пристроях такої проблеми немає, гортати можна «ховається» за таблицю в будь-якому місці.
Щороку, зазвичай навесні, просять у мене вихідні по завданню комівояжер. А я їх давно сам не бачив, що називається, і ніби як відморожуватися, кажу - куди подів, не знаю. Але тут розгортав проекти по роботі і наткнувся на обрані архіви дельфийских.
Схожі статті
