1. Приклади таблиць за умовчанням
2. Очки для розгляду
3. Різні рішення
4. Опція PDF
5. Плюси:
6. Плюси:
7. Плюси:
8. Вибірково відображення опції даних
9. Плюси:
10. Параметр горизонтальної прокрутки 2
11. Плюси:
12. CSS-відповідна таблиця
13. Отже, який тип реагує столу?
14. Травень 2016 Оновлення

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

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

Приклади таблиць за умовчанням

Можливим є приховування селективної інформації при перегляді в мобільному вікні, однак Користувач не повинен пропускати вміст тільки тому, що вони використовують мобільний пристрій. Щоб допомогти вирішити, як буде зменшуватися таблиця, варто подумати про те, для кого або для чого призначена таблиця.

Очки для розгляду

• Скільки даних містить ваша таблиця

• На якій платформі будуть створюватися таблиці (наприклад, CMS, статичний сайт HTML)

• Як будуть створюватися таблиці (наприклад, CMS-таблиця, ручна кодована)

• Хто буде створювати таблиці (Чи користувач має будь-які технічні навички чи ні)

• Чи має користувач доступ або можливість писати CSS або JavaScript

Різні рішення

Ось кілька прикладів, що демонструють різні підходи, що підходять до таблиці у відповідь на макет. Ці методи змінюють відображення таблиці за допомогою комбінації CSS і JavaScript.

Опція PDF

Ви можете зберегти документ Excel як PDF, а потім завантажити його на свій сайт. При перегляді веб-сайту на великому екрані таблиця буде видно. Коли сайт переглядається на мобільному пристрої, таблиця відображатиметься прихованою і замість неї з'явиться посилання на документ PDF. Після натискання посилання користувач буде переведений на сторінку, де вони зможуть переглянути файл PDF. Ця зміна може статися за допомогою простого запиту CSS, щоб приховати оригінальну таблицю і відобразити посилання pdf.

Плюси:

• Легко застосувати на сайті
• Додано бонус для завантаження файлу
• Потрібно лише простий запит CSS, щоб приховати оригінальну таблицю і відобразити посилання pdf

Мінуси:

• Відводить користувача від сторінки
• Можливо, посилання не буде натиснуто

Горизонтальний прокручування контейнера

Ви можете дозволити користувачеві горизонтально прокручувати таблицю, розміщуючи її всередині контейнера з переповненням: auto; і overflow-y: прихований; . Після того, як ширина сторінки стане меншою, ніж таблиця, контейнер маскує таблицю, щоб зберегти її в межах ширини сторінки. Після цього користувач може прокрутити пальцем вліво і вправо, щоб переглянути вміст таблиці. Це можна легко застосувати за допомогою простого запиту CSS.

Плюси:

• Легко застосовувати з CSS
• Зберігає користувача на сторінці
• Не впливає на ширину сторінки

Мінуси:

• Користувач може не знати, що вони можуть прокручуватися горизонтально
• Важко переглядати вміст таблиці відразу
• Потрібно, щоб користувач прокручував горизонталь

Параметр кругової діаграми

Цей параметр приймає дані таблиці та перетворює їх у кругову діаграму. Це розумний підхід, але досить обмежений для відображення великих табличних даних у зручній для користувача формі.

Плюси:

• Ущільнює дані для розміщення на сторінці

Мінуси:

• Вміст таблиці важко перекласти
• Обмежується тим, скільки вмісту можна переглядати
• Таблиця стає круговою діаграмою

Посилання: http://tinyurl.com/7qtzet9

Вибірково відображення опції даних

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

Плюси:

• Ущільнює стіл, щоб вміститися в невеликі екрани
• Дозволяє користувачеві вибрати те, що вони хочуть переглянути

Мінуси:

• Не поміщається на екран, коли всі дані переглядаються
• Це може дратувати вибір вікна для перегляду вмісту

Посилання: http://tinyurl.com/lvkknne (Демо)

http://tinyurl.com/7v7r3uf (Джерело)

Параметр горизонтальної прокрутки 2

Це хороше рішення для збереження формату таблиці так само, як і при перегляді на великому екрані. При перегляді на невеликому екрані таблиця розбивається на дві горизонтальні прокручувальні колонки. Це дозволяє користувачеві панорамувати вліво і вправо, використовуючи їх пальцем для перегляду даних таблиці.

Плюси:

• Підходить для великого вмісту столу
• Дозволяє користувачу переміщати окремі стовпці

Мінуси:

• Використовує JavaScript Polyfill, щоб активувати зміни на заданій ширині
• Потрібно, щоб користувач прокручував горизонталь

Посилання: http://tinyurl.com/m53zva7

CSS-відповідна таблиця

Цей варіант є найкращим варіантом, який можна легко застосувати на різних платформах. Він використовує запити CSS-медіа для переформатування таблиці в режим перегляду, зручного для мобільних пристроїв. Всі дані залишаються читабельними і усувають необхідність горизонтального прокручування. Дивіться коментар Кріса Койєра, розташований у наведеному нижче посиланні, він пояснює, як всі дані можуть зберігатися в HTML.

Отже, який тип реагує столу?

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

Травень 2016 Оновлення

Тепер, коли властивість flex-box добре підтримується, є кілька методів, які використовують це. Однак, наскільки нам відомо, всі ці методи вимагають зміни розмітки, щоб не використовувати елемент таблиці. Щоб залишити коротку статтю, ми не включили детальну розбивку цих методів, але ви можете дізнатися більше про це Flex-Box реагувати таблиці тут. Будь ласка, повідомте нам у коментарях, якщо ви вважаєте, що ми повинні включити їх.

Тут є велика колекція приклади коду і відмінний запуск таблиць взагалі на CSS трюки .