1. Обновления

С тех пор, как я впервые опубликовано об этом , Посмотреть демо

Идея оригинала состояла в том, чтобы отказаться от разметки таблицы и сделать каждую ячейку отдельной линией. Каждая из этих строк помечена псевдоэлементом. Это создает намного более высокую таблицу, требующую большей вертикальной прокрутки, но не требует горизонтальной прокрутки. Проще просматривать данные без потери контекста что к чему. Недостатком является то, что вы можете потерять контекст сравнения данных, так как вы больше не видите ячейки данных рядом с другими ячейками этого типа.

Mobifreaks опубликовал очень похожая идея , который использует те же изменения макета и псевдо-элемент маркировки. Они использовали атрибуты HTML5 data- * для маркировки, что избавляет от необходимости иметь собственный CSS для разных таблиц. Я не покупаю в части SEO, но код хорош.

Дерек Пенникуфф взял оригинал и применил концепцию «сначала мобильный» , Вместо того, чтобы начинать с разметки таблицы, она начинается с разметки списка определений, а затем принудительно превращает ее в макет таблицы, когда экран достаточно большой, чтобы вместить его. Хотя мне нравится думать здесь, я не уверен, что мне нравится то, что нужно, чтобы сделать это. Разметка намного тяжелее и (как ни странно) я не думаю, что она семантическая. Табличные данные должны быть размечены как таблица. Я думаю, что философия, лежащая в основе «мобильности в первую очередь», заключается в том, чтобы по умолчанию все было проще, легче, тяжелее и сложнее для больших экранов. Эта демонстрация начинается и остается тяжелой.

Дрю Дикстерхаус сделал демо это вычисляет, где таблица должна сломаться, измеряя, стала ли таблица шире, чем экран, сохраняя эту точку останова для эффективности.

Скотт Джел придумал две умные идеи. Одним из них было построить диаграмму из данных в таблице. В этой демонстрации это круговая диаграмма, которая намного уже таблицы полных данных и поэтому больше подходит для небольших экранов.

Посмотреть демо

Довольно круто, но очевидно, что все таблицы не могут быть преобразованы в графики. Я бы также сказал, что таблица данных и диаграмма - это разные вещи. Если вы собираетесь решить задачу создания диаграммы, было бы неплохо показать ее на большом экране, а также предоставить контекст полезным альтернативным способом. Или, по крайней мере, есть возможность увидеть это.

Другая идея Скотта сосредоточена на проблеме, заключающейся в том, что большие таблицы данных могут растягивать ширину родительского контейнера сверх того, что способен отображать маленький экран. Таким образом, чтобы предотвратить это, медиа-запрос используется, чтобы скрыть таблицу на маленьких экранах, заменив ее небольшой таблицей макетов и ссылкой для просмотра полной таблицы.

У Стюарта Карри была идея просто скрывая менее важные столбцы для небольших экранов. Одна из самых ранних проблем людей, связанных с мобильными сайтами, заключалась в том, что то, что они находятся на мобильном устройстве, не означает, что они заслуживают менее полного опыта, чем пользователь с большим экраном (тем более, что эти устройства полностью способны маневрировать вокруг "полных" сайтов).

Посмотреть демо

Я думаю, что Стюарт был на что-то, хотя. Использование небольших экранов для фокусирования информации на самых важных вещах - это замечательно, просто не нужно блокировать информацию без помощи. Мэгги Костелло Вакс из Filament Group также имела идею скрытие ненужных столбцов на небольших экранах , но также предоставляет выпадающее меню, где вы можете включить их, если хотите (что вы можете увидеть при горизонтальной прокрутке).

Посмотреть демо

Дэвид Бушелл также решил не изменять базовый формат таблиц, а решить «слишком широкую» проблему. Его концепция переворачивает стол на бок и применяет overflow-x: auto к телу, что означает, что ячейки данных могут прокручиваться влево и вправо, если они выходят за пределы небольшого экрана, но вы все равно всегда видите заголовки (как если бы они были в фиксированном положении).

Посмотреть демо

У Брэда Черняка есть идея, которую он называет «Радужными таблицами», где на меньших экранах структура сетки таблицы отбрасывается, а ячейки данных сжимаются друг в друга так же плотно, как и всегда, оставаясь «строкой». Затем вместо того, чтобы определить, по какому столбцу он находится, данные имеют цветовую кодировку для соответствия ключу.

(Демо сейчас не в сети.)

Обновление 26 мая 2012 года : Zurb новая техника они опубликовали. Он сфокусирован на том, чтобы крайний левый столбец был своего рода столбцом «ключа». На широких экранах это просто обычный столбец. На маленьких экранах он становится фиксированным / липким влево, а остальные столбцы могут прокручиваться. Это позволяет сравнивать ряды строк.

Это похоже на методику Дэвида Бушелла с фиксированным левым столбцом, но, возможно, немного более устойчиво, поскольку использует JavaScript для небольшой манипуляции с DOM и измерения размера экрана. Дополнительные зависимости, более глубокая поддержка, ваш звонок.

Посмотреть демо

Обновления

Вот еще некоторые, которые возникли:

Кроме того, у Джейсона Григсби есть статья на выбирая решение основанный на том, что пользователь хотел бы сделать с таблицей.

Чтобы сделать это еще более сложной проблемой, подумайте, с какой разметки вам нужно начать, чтобы данные работали вообще без CSS, а также без JavaScript. Идея заключается в том, что он может отправлять электронную почту, RSS и прочее, и все будет в порядке. Я пытался решить это здесь. Это довольно грязно, но это работает.

Похожие

Комментарии