Адаптивные таблицы CSS, новый взгляд

Адаптивные таблицы CSS, новый взгляд

От автора: многие люди работают с гибкими таблицами. Обычно идея заключается в том, чтобы превратить таблицу в пары ключ-значение, чтобы ячейки становились строками. Тогда у нас было бы всего 2 столбца, которые вписываются в любой экран. Это и есть адаптивная таблица CSS. Однако это означает, что заголовки таблиц теперь должны повторяться для каждой строки.

Существующие способы сделать это:

Дублирование содержимого в CSS или через атрибут data- *, используя сгенерированный контент для вставки его перед каждой строкой.

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

Несколько методов совершенно в другом направлении:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Скрытие несущественных столбцов на небольших экранах

Вывод вместо этого миниатюры таблицы и отображение полной таблицы при нажатии на миниатюру

Отображение диаграммы на меньших экранах (например, круговая диаграмма)

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

Оба метода очень похожи: они устанавливают для элементов таблицы display: block;, так что они ведут себя как обычные элементы и дублируют содержимое thead двумя разными способами:

Использование text-shadow и создание только тени для каждой строки

Использование функции element() для дублирования thead, стилей и всего остального.

Каждый метод имеет свои плюсы и минусы, но следующие достоинства и недостатки присущи обоим:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Плюсы: работает с обычной разметкой таблиц

Минусы:

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

Работает только в том случае, если ни одна из ячеек таблицы не переносится, поскольку метод зависит от того, что ячейки таблицы выровнены с их заголовками.

Использование text-shadow для копирования текста в другие строки

Дополнительные преимущества: Работает во всех браузерах

Дополнительные минусы: Max Number для строк нужно жестко указывать в CSS, так как каждой строке требуется еще одна тень текста для thead. Тем не менее, вы можете указать больше теней, чем необходимо, поскольку overflow: hidden для таблицы позволяет скрыть лишние тени. Кроме того, количество столбцов должно быть указано в CSS (переменная —cols).

Использование element(), чтобы скопировать весь в другие строки

Дополнительные минусы: element() в настоящее время поддерживается только в Firefox

Автор: Lea Verou

Источник: http://lea.verou.me/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap: практика адаптивной верстки от А до Я

Научись верстать сайты, используя все возможности фреймворка Bootstrap.

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree